海南手机网站建设公司,设计公司门头设计,外贸网页制作公司哪家好,小米手机网站架构基本术语
本文中#xff0c;proto [[Prototype]]
原型链
基本思想#xff1a;
构造函数生成的对象有一个指针#xff08;proto#xff09;指向构造函数的原型。如果将构造函数1的原型指向另一个构造函数2的实例#xff0c;则构造函数1的实例__proto__.proto 指向了构…基本术语
本文中proto [[Prototype]]
原型链
基本思想
构造函数生成的对象有一个指针proto指向构造函数的原型。如果将构造函数1的原型指向另一个构造函数2的实例则构造函数1的实例__proto__.proto 指向了构造函数2的原型。原型2和实例1之间构成了一条原型。
function Super() {};
function Sub() {};
Super.prototype.sayHi function () { console.log(hi) };
Sub.prototype new Super();const supInstance1 new Sub();
supInstance1.sayHi(); // hi缺点
Sub.prototype.constructor 被改变。Sub.prototype new Sub()new的过程可能会有副作用。
盗用构造函数经典继承
基本思想
在new一个构造函数1的时候通过在构造函数1中调用另一个构造函数2来实现继承。通过调用构造函数2将构造函数2中的实例属性复制到构造函数1的实例中。
function Car(wheels) {this.wheels wheels;
}function ElectricCar(wheels, type) {Cat.call(this, wheels);this.type type;
}缺点
子类的实例不能访问父类原型上的方法。必须在构造函数中定义方法因此函数构造函数1不能重用。
组合继承伪经典继承
基本思想
将子类原型指向父类实例通过原型链来实现子类继承父类原型上的方法。通过盗用构造函数来继承实例的属性。
function Super(title) {this.title title;
}
Super.prototype.sayHi function () {console.log(this.title, - Super title);
};function Sub(superTitle, subTitle) {Super.call(this, superTitle);this.subTitlte subTitle;
}Sub.prototype new Super();const subInstance new Sub(superTitle in instance, subTitle in instance);subInstance.sayHi(); // ****subtitle in instance - this title****/* subInstance结构类型
**{title: superTitle in instance,subTitlte: subTitle in instance,[[Prototype]]: Super
}--- 在[[Prototype]]:Super中
--- Super的结构类型{title: undefined,[[Prototype]]: Object,
}**
*/缺点
在构造函数2的原型中有无用变量titleundefined在进行原型链的链接时会执行new Super() 过程如果构造函数Super是一个有副作用的函数会有不可预知的问题。两次调用Super函数子类的原型的constructor属性指向丢失。
原型式继承
基本思想
对象间构造原型链实现属性的共享。
实现
es5的Object.create函数
// 返回一个对象对象.__proto__ 指向 o
function objectCreate(o) {function F() {};F.prototype o;return new F();
}寄生式继承
基本思想
通过工厂模式创建新对象构造函数中通过原型式继承来获取目标对象的能力。
function createSub(originObject) {const newObject Object.create(originObject);newObject.sayHi function() { console.log(hi) };return newObject;
}const person { name: 张三,friends: [李四, 赵武, 甲一]
};const personA createSub(person);
personA.sayHi();优缺点
感觉没有使用的场景
寄生式组合继承目前比较完美的解决方案
基本思想
重写子构造函数的原型将构造函数原型的[[prototype]]指向从默认Object改为父构造函数的原型。实现原型属性的继承。在子构造函数调用父构造函数实现实例属性的复用。
function Super(name) {this.name name;
}
Super.prototype.sayHi function() { console.log(hi this is super and name is ${this.name})};function Sub(name, age) {Super.call(this, name);this.age age;
}Sub.prototype Object.create(Super.prototype, {constructor: {value: Sub,enumerable: false,writable: true,configurable: true,},
});
// 这里同样可以用es6中的 setPrototypeOf 来设置原型链的链接Sub.prototype.sayAge function () { console.log(the age of ${this.name} is ${this.age}); }const subInstance new Sub(Sub instance, 12);subInstance.sayHi(); // hi this is super and name is Sub instance
subInstance.sayAge(); // **the age of Sub instance is 12**
优缺点
功能上没有缺点实现起来冗长
es6的继承
extends关键字
es6的继承本质上是es5继承的语法糖。
// 可以实现和寄生式组合继承完全相同的效果
class Super {constructor(name) {this.name name;}sayHi() {console.log(hi this is super and name is ${this.name})}
}class Sub extends Super {constructor(name, age) {super(name);this.age age;}sayAge() {console.log(the age of ${this.name} is ${this.age})}}const subInstance new Sub(Sub instance, 12);subInstance.sayHi(); // hi this is super and name is Sub instance
subInstance.sayAge(); // **the age of Sub instance is 12**参考数据
- [1] [你不知道的JavaScript]
- [2] [JavaScript高级程序设计]
- [3] [[mdn](https://developer.mozilla.org/)](https://developer.mozilla.org/)
