欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

实例-原型链继承

程序员文章站 2024-03-01 18:23:40
...

构造函数是创建对象方式的一种。
可以使用 NEW 关键字来实例化对象。
其中,在创建构造函数时,首字母应大写,以便区分普通函数。
构造函数中的 this 指向实例对象。
创建一个构造函数

function Star(uname, age, sex) {
	this.uname = uname;
	this.age = age;
	this.sex = sex
}

实例化一个对象

let zs = new Star('张三', 23, '男')
console.log(zs);

输出
实例-原型链继承
通过构造函数可以很方便的使用 NEW 操作符来实例化对象。每实例化一个对象,都是对构造函数的属性和方法的一次拷贝。
实例-原型链继承

通常,我们将公共属性放在构造函数内部,将公共方法放在构造函数的原型对象上。这样可以节省一部分内存。
原型对象prototype
作用:共享方法,共享构造函数中的方法;
一般将实例对象的公共属性定义在构造函数内部,
公共方法存放在原型对象prototype中。
以下代码给原型对象上添加了一个 sing 方法:

function Star(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Star.prototype.sing = function(){
    console.log(this.name + "唱歌很好听");
}
var ldh = new Star("刘德华",60,"男");
console.log(ldh);
ldh.sing();//刘德华唱歌很好听

实例对象可以直接调用 sing 方法,输出为:刘德华唱歌很好听
实例-原型链继承
这样,所有需要使用该方法的实例对象调用该方法时都是原型对象中的相同的这个 sing 方法,就节省了内存

var ldh = new Star("刘德华",60,"男");
var zxy = new Star("张学友",56,"男");
console.log(ldh.sing === zxy.sing); //true

打印结果为 true;
说明实例对象ldh 和 zxy 调用的是同一个sing 方法。
实例对象原型 proto
在实例对象身上,系统自己会给每个实例对象添加一个 proto ,该属性是一个指针,指向构造函数的原型对象。
方法查找规则:显现看ldh实例对象上是否有 sing 方法,如果有就执行实例对象上的sing 方法,如果没有,因为有 proto 的存在,就去构造函数的原型对象身上查找 sing 方法。举个栗子:
实例-原型链继承
在 ldh 这个实例对象上并没有找到 sing 这个方法,我们看到最下面有实例对象的原型 proto ,它指向了构造函数的原型对象,此时,因为 ldh 本身没有sing 方法,就会去它指向的构造函数的原型对象中查找
实例-原型链继承
可以看到在它的原型对象中有sing 方法,因此可以调用:
构造函数、原型对象和实例对象的关系如下图所示:
实例-原型链继承

我们把构造函数 Star 的公共方法存放在 Star.prototype 原型对象中,通过 new 关键字创建实例对象上有一个系统自带的对象原型 proto ,因此实例对象可以通过 对象原型 proto 来访问原型对象中存放的构造函数的公共方法。
原型对象中还有一个 constructor 属性指向了原构造函数,上面是给原型对象添加了一个公共的方法,如果添加了多个呢?

 function Star(name,age,sex){
     this.name = name;
     this.age = age;
     this.sex = sex;
 }
 Star.prototype = {
     sing : function(){
         console.log(this.name + "唱歌很好听");
     },
     movie : function(){
         console.log(this.name + "电影很好看");
     }
 }

 console.log(Star.prototype.constructor);

打印一下此时原型对象的指向:
实例-原型链继承
此时,原型对象的指向不再是构造函数Start了,这是因为我们在给原型对象赋值时,将原来的指向给覆盖了,此时需要使用 constructor 重新指向构造函数 Star:

function Star(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Star.prototype = {
    constructor : Star,//如果修改了原来的原型对象.给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
    sing : function(){
        console.log(this.name + "唱歌很好听");
    },
    movie : function(){
        console.log(this.name + "电影很好看");
    }
}

console.log(Star.prototype.constructor);

打印结果显示,原型对象重新指向了 构造函数 Star:
实例-原型链继承
这样就完成了给原型对象新增多个方法的操作了。

相关标签: 实现继承的方式