Js中的构造函数、原型、原型链、继承

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_43740552/article/details/102776055

写在前头
首先思考一个问题,我们知道通过构造函数和new操作符可以创建一个新的对象,并且同一个构造函数可以创建出相同属性和方法的对象,这正是prototype所做的(使用原型对象的好处是可以让所有实例共享它所包含的属性和方法)。并且,在其他构造函数中通过call和apply调用其他构造函数不就可以实现继承了吗,那我们还要prototype做什么?

原因是,其实new操作符生成的对象并不能共享属性和方法,每次new一个新对象时,都要为这个对象开辟一个新的空间来存放它的属性和方法。而且,在构造函数中,每次想要修改某个属性和方法时,都要重新生成所有的实例,对资源造成了极大的浪费。因为不想浪费,所以就引入了原型。

理解原型对象
遵循以下几个原则:
1:我们创建的每个函数都有一个prototype属性,这个属性是个指针,指向一个对象(这个对象就是原型对象),而这个对象包含了所有实例共享的属性和方法。
2:原型对象除了1所说包含所有实例的共享的属性和方法,还有一个constructor指针指向构造函数,对的,构造函数通过constructor和prototype互指。

function animal(){}
animal.prototype.name = 'Tom';
animal.prototype.say = function(){
	alert('喵喵');
}

var cat = new animal();
console.log(cat.name) //"Tom"
console.log(cat.say) //"喵喵喵?"

ok,解释一下。上面代码中
1, 构造函数为aniaml,当我们创建了这个构造函数时,他已经包含了一个原型属性
prototype
2, 该构造函数的原型对象
console.log(animal.prototype) //返回一个对象,即原型对象,该对象包含一个name属性,一个say函数
3, 该实例
cat.__prpto__ == animal.prototype //true

在这个例子中,构造函数自身为空,在构造函数的原型对象上创建了一个属性和方法,他们被所有实例所共享,因为实例中有proto指针指向了该原型对象。但是如果使用这种方法,我们在构造函数内写的属性和方法不是都可以转到prototype上吗,那还要构造函数干什么?

因为,此处是指针式的获取原型上的数据,当这个数据为引用型数据(如数组、对象)时,我们在一个实例上改变这个数据时,会影响到其他实例。因此,构造函数也有它的必要用途,函数原型上一般只定义函数和非引用型数据。

组合使用构造函数和原型模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby","Court"];
}

Person.prototype = {
    constructor : Person,
    sayName : function(){
        alert(this.name);
    }
}

var person1 = new Person("Nicholas",29,"Software");
var person2 = new Person("Greg",27,"Doctor");

perons1.frineds.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //“Shelby,Count”

在这个例子中,构造函数中定义实例属性,原型对象上定义方法和共享属性。每次调用构造函数,都会给新的对象开辟一个新的空间,此时,实例上的friends是全新的,非proto指向,拥有独立的空间,所以每个空间的friends数组是单独互不影响的,因此在person1对象中添加一个friends后,person2的friends属性并未改变,而person1和person2都可以共享sayName函数。

原型链继承
在java等oop语言中继承由class和extend关键字来实现,而在ES5中没有这些关键字( ES6有 ),因此,只能通过使子函数的原型对象等于父函数的实例来实现链式继承。

function SuperType(){
    this.color = ['red', 'blue' , 'yellow'];
}

function SubType(){}

SubType.prototype = new SuperType(); //子函数的原型对象等于父函数的实例

var instance1 = new SubType();
instance1.color.push ('white');
alert(instance1.color); // red,blue,yellow,white

var instance2 = new SubType();
alert(instance2.color); // red,blue,yellow,white

子函数的原型对象等于父函数的实例,此时子函数SubType的原型被改写,成为了SuperType的实例,而上面讲了实例拥有一个proto属性(指针)指向原型对象,因此这个SubType的原型对象上的proto属性指向了SuperType的原型对象。然后当我们创建了SubType的实例instance时,instance中也有一个proto指针,而它指向SubType.prototype,SubType.prototype上的proto指针,指向SuperType.prototype,其实再往上,SuperType.prototype也是对象的一种,因此它也是Object的一个实例,SuperType.prototype的proto指针指向Object.prototype。(顶层)(原型链的核心就是proto指针)。这种实例与原型的链条,就叫做原型链。

组合继承
上述的SubType.prototype = new SuperType(); //子函数的原型对象等于父函数的实例的确实现了继承,但是当SuperType构造函数中有引用型数据时,即此时SubType.prototype上也有了引用类型,现在又出现了上面提过的问题,在sub的实例中改变引用类型的值会反映到所有实例中。
第二点,在创建子类型的实例时无法给超类型的构造函数传递参数。

单独使用借用构造函数
解决上述问题有一种借用构造函数的方法,在子构造函数中使用call或apply,如SuperType.call(this,arguments)改变sub构造函数中this的指向,而且可以通过这种方法向超类型传递参数,但是单单使用借用构造函数,并不能达到函数复用的效果,依然要为每个实例上的函数开辟空间(因为此时函数没有定义在原型上),为了融合借用构造函数和原型链继承的优点,出现了组合继承。

组合

function SuperType(name){
    this.name = name;
    this.color = ['red', 'blue' , 'yellow'];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
}

function SubType(name, age){
    //继承属性 超类
    //获得name和color属性
    SuperType.call(this, name);
    this.age= age;
} 

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
    alert(this.age)
}

var instance1 = new SubType("Nicholas", 29);
instance1.color.push("black");
console.log(instance1.color); //["red", "blue", "yellow", "black"]
instance1.sayName();
instance1.sayAge();

var instance2 = new SubType("Greg", 27);
console.log(instance2.color); //["red", "blue", "yellow"]
instance2.sayName();
instance2.sayAge();

在这个例子中,超类型构造函数定义了name和colors两个属性,超类型原型对象上定义了一个sayName函数可复用,子类型中使用借用构造函数的方法,使所有的子类实例都继承了父类的colors和name属性,还设立了一个自己的age属性,之后使子类型的原型对象等于超类型的一个实例,继承链生效,又在子类型的原型对象上增加了一个sayAge函数(此处顺序不能反,否则子类原型对象被覆盖,新函数无效),再之后新建了两个子类型的实例,在instance1改变colors数组并未影响instance2,且子类型,超类型函数皆可调用。

此时的逻辑关系从所截的图上来看,实例之所以引用类型互不影响,因为此时实例中的colors属性是同过借用构造函数,新建实例时,向超类型传递参数,并获得了name和colors属性,每个新的实例都是新的空间,且在原型链的最下面(原型链向上查找是否拥有某属性),所以对数组的操作并不互相影响。
这里子类型的实例其实若本身没有colors属性,指向原型的color属性还是会互相影响的,所以是借用构造函数解决了这个问题,让子类型实例先获得了这个属性,当在实例上访问到时,便不会再往下寻找
子类型的实例上的proto依然指向子类型的原型对象,即SubType.prototype,其上还有一个定义的sayAge函数。
此原型对象因为等于超类型的实例,所以也有一个proto指向超类型的原型对象,即SuperType.prototype。
其上还有一个sayName函数,SuperType.prototype上还有一个proto,再往下就是原生的Object.prototype了。

猜你喜欢

转载自blog.csdn.net/weixin_43740552/article/details/102776055