Javascript深入理解之继承与原型链
1.构造函数、原型、实例的关系
* 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针[[Prototype]] *
function Foo() {
this.a = 123;
}
Foo.prototype.b = 456;
let AA = new Foo();
console.dir(Foo.prototype);
console.dir(Foo.prototype.constructor);
console.dir(AA.__proto__);
// Foo为构造函数
// AA为实例
// Foo.prototype为原型对象
// Foo.prototype的constructor指向构造函数
// AA的__proto__指向原型对象
1.原型链
* 关于原型链的定义,我们来看一下MDN里面的定义“在 javaScript 中,每个对象都有一个指向它的原型(prototype)对象的内部链接。这个原型对象又有自己的原型,直到某个对象的原型为 null 为止(也就是不再有原型指向),组成这条链的最后一环。这种一级一级的链结构就称为原型链(prototype chain)。” *
2.原型链实例与继承
function Foo() {
this.nameOne = 123;
this.toOne = function() {
return this.nameOne;
}
}
function FooTwo() {
this.nameTwo = 456;
this.toTwo = function() {
return this.nameTwo;
}
}
FooTwo.prototype = new Foo();
/* 当我们对对象的prototype属性进行替换时,可能会对对象constructor属性产生一定的副作用,因此,在对prototype进行替换后,要对对象的constructor进行重置,避免陷入原型陷进。*/
FooTwo.prototype.constructor = FooTwo;
let aa = new FooThree();
console.log(aa.nameOne); // => 123
console.log(aa.nameTwo); // => 456
console.log(aa.toOne()); // => 132
console.log(aa.toTwo()); // => 456
关于原型陷阱请看JavaScript深入理解之原型
* 上例中:定义了两个类型:Foo和FooTwo,每个类型分别有一个属性和方法,且FooTwo继承了Foo,继承是通过创建Foo的实例,并将该实例赋给Foo.prototype实现的。实现的本质是重写原型对象,代之以一个新类型的实例,即原来存在于Foo的实例中的方法现在也存在于FooTwo.prototype中了,这样就继承了Foo的属性和方式,实现了继承。通俗一点说,A构造函数要继承B构造函数的属相和方法,则将B的实例赋值给A的prototype属性。*
看下面一个例子
function Foo() {
this.name = 123;
this.toString = function() {
return this.name;
}
}
function FooTwo() {
this.nameTwo = 456;
}
function FooThree() {
this.name = 789;
this.toStr = function() {
return this.name;
}
}
FooTwo.prototype = new Foo();
FooThree.prototype = new FooTwo();
FooTwo.prototype.constructor = FooTwo;
FooThree.prototype.constructor = FooThree;
let aa = new FooThree();
console.log(aa.nameTwo); // => 456
console.log(aa.toString()); // => 789
console.log(aa.toStr()); // => 789
// aa同时是三个构造器的实例
console.log(aa instanceof Foo); // => true
console.log(aa instanceof FooTwo); // => true
console.log(aa instanceof FooThree); // => true
* 上例中:两个输出都打印789,因为在继承中,继承的方法和属性, 而且是单纯的方法和属性,FooThree实际上是下面这样:*
function FooThree() {
this.nameTwo = 456;
this.name = 789; // 因为我们设置constructor指向FooThree
this.toStr = function() {
return this.name;
}
}
3.构造函数模式继承
function Foo(name) {
this.name = name;
this.say() = function() {
return this.name;
}
}
function FooTwo() {
// 继承Foo,同时还传递参数
Foo.call(this, 123);
}
let aa = new FooTwo();
console.log(aa.name); // => 123
console.log(aa.say()); //TypeError: say is not a function
* 构造函数模式缺点在于只能继承属性,不能继承方法 *
4.组合继承
function Foo(name) {
this.name = name;
}
Foo.prototype.say = function() {
return this.name
}
function FooTwo(name, age) {
// 继承属性
Foo.call(this, name);
this.age = age;
}
// 继承方法
FooTwo.prototype = new Foo();
FooTwo.prototype.constructor = FooTwo;
FooTwo.prototype.say = function() {
return this.name;
}
let aa = new FooTwo('aa', 26);
console.log(aa.name); // => aa
console.log(aa.age); // => 26
console.log(aa.say()); // => aa
5.其它继承方式还有:原型式继承、寄生式继承等