1、原型链
/*
*??问题
*(1)父类中的**引用类型值会被子类共享**
*(2)不能向超类的构造函数中传递参数
*/
function SuperType(){
this.property=true;
}
SuperType.prototype.getSuperValue=function(){
return this.property;
}
function SubType(){
this.subProperty=false;
}
//继承SuperType,!!!!先写
SubType.prototype=new SuperType();
//然后定义方法
SubType.prototype.getSubValue=function(){
return this.subProperty;
}
//重写超类中的方法
SubType.prototype.getSuperValue=function(){
return false;
}
var instance=new SubType();
console.log(instance.getSuperValue());
function A(a){
this.varA = a;
}
// 以上函数 A 的定义中,既然 A.prototype.varA 总是会被 this.varA 遮蔽,
// 那么将 varA 加入到原型(prototype)中的目的是什么?
A.prototype = {
varA : null, // 既然它没有任何作用,干嘛不将 varA 从原型(prototype)去掉?
// 也许作为一种在隐藏类中优化分配空间的考虑?
// https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables
// 将会验证如果 varA 在每个实例不被特别初始化会是什么情况。
doSomething : function(){
// ...
}
}
function B(a, b){
A.call(this, a);
this.varB = b;
}
B.prototype = Object.create(A.prototype, {
varB : {
value: null,
enumerable: true,
configurable: true,
writable: true
},
doSomething : {
value: function(){ // override
A.prototype.doSomething.apply(this, arguments); // call super
// ...
},
enumerable: true,
configurable: true,
writable: true
}
});
B.prototype.constructor = B;
var b = new B();
b.doSomething();
2、借用构造函数
/*
*优势:可以通过构造函数向子类中传递参数
*??问题
*(1)函数的复用无从谈起
*(2)在超类中定义的原型方法在子类中是不可见的
*/
function SuperType(name){
this.name=name;
}
function SubType(){
SuperType.call(this,"Nick");//!!!先调用,防止覆盖子类中的属性
this.age=29;
}
var instance=new SubType();
console.log(instance.age);
console.log(instance.name);
3、组合继承
/*
* ******最常用方式******
*缺点:调用两次构造函数
*/
function SuperType(name){
this.name=name;
this.colors=["red","blue","black"];
}
SuperType.prototype.sayName=function(){
console.log(this.name);
}
function SubType(name,age){
//继承属性,必须先写,方式被覆盖
SuperType.call(this,name);//第二次调用
this.age=age;
}
//继承SuperType,!!!!先写
SubType.prototype=new SuperType();//第一次调用
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function(){
console.log(this.age);
}
var instance1=new SubType("Nick",24);
instance1.colors.push("heh");
console.log(instance1.colors);
instance1.sayAge();
instance1.sayName();
var instance2=new SubType("xiaoming",33);
console.log(instance2.colors);
instance2.sayAge();
instance2.sayName();
4、原型继承
/*
*目的:基于已有对象创建新对象,同时还不必因此创建自定义类型
*优点:不用创建构造函数
*缺点:会共享相应的值
*
*/
function object(o){
function F(){}
F.prototype=o;
return new F();
}
var Person={
name:"Nick",
friends:["gic","fd","fff"]
};
//var anotherPerson=object(Person);
//*****!!!!等价于
var anotherPerson=Object.create(Person,{
name:{
writable:true,
value:"Grey"
}
});
anotherPerson.name="Grey";
anotherPerson.friends.push("Bob");
var yetanotherPerson=object(Person);
yetanotherPerson.name="Linda";//不会修改父类的值,会重新生成一个name属性
anotherPerson.name="ff";
console.log(yetanotherPerson.name);//Linda
console.log(Person.friends);
5、寄生式继承
/*
*缺点:函数不能复用降低效率
*主要考虑对象而不是构造函数的情况下适用
*/
function object(o){
function F(){}
F.prototype=o;
return new F();
}
function createAnother(original){
var clone=object(original);
clone.syaHi=function(){
console.log("hi");
};
return clone;
}
var person={
name:"Nick",
friends:["gic","fd","fff"]
};
var anotherPerson=createAnother(person);
anotherPerson.syaHi();
3、寄生组合继承
/*
* 解决了组合继承两次调用构造函数问题
*/
function object(o){
function F(){}
F.prototype=o;
return new F();
}
function inheritPrototype(subType,superType){
var prototype=object(superType.prototype);//创建对象
prototype.constructor=subType;//增强对象
subType.prototype=prototype;//指定对象
}
function SuperType(name){
this.name=name;
this.colors=["red","blue","black"];
}
SuperType.prototype.sayName=function(){
console.log(this.name);
}
inheritPrototype(SubType,SuperType);
function SubType(name,age){
//继承属性,必须先写,方式被覆盖
SuperType.call(this,name);//第二次调用
this.age=age;
}
SubType.prototype.sayAge=function(){
console.log(this.age);
}
var instance1=new SubType("Nick",24);
instance1.colors.push("heh");
console.log(instance1.colors);
instance1.sayAge();
instance1.sayName();
var instance2=new SubType("xiaoming",33);
console.log(instance2.colors);
instance2.sayAge();
instance2.sayName();
proto
1.所有构造器/函数的__proto__都指向Function.prototype,
(1) 它是一个空函数(Empty function)
Number.__proto__ === Function.prototype // true
Boolean.__proto__ === Function.prototype // true
String.__proto__ === Function.prototype // true
Object.__proto__ === Function.prototype // true
Function.__proto__ === Function.prototype // true
Array.__proto__ === Function.prototype // true
RegExp.__proto__ === Function.prototype // true
Error.__proto__ === Function.prototype // true
Date.__proto__ === Function.prototype // true
包括自定的
// 函数声明
function Person() {}
// 函数表达式
var Man = function() {}
console.log(Person.__proto__ === Function.prototype) // true
console.log(Man.__proto__ === Function.prototype) // true
js的解析器对函数声明与函数表达式并不是一视同仁地对待的。
对于函数声明,js解析器会优先读取,确保在所有代码执行之前
声明已经被解析,而函数表达式,如同定义其它基本类型的变量
一样,只在执行到某一句时也会对其进行解析,所以在实际中,
它们还是会有差异的,具体表现在,当使用函数声明的形式来定义函数时,
可将调用语句写在函数声明之前,而后者,这样做的话会报错。
(2)Math,JSON是以对象形式存在的,无需new。它们的__proto__是
Object.prototype。
Math.__proto__ === Object.prototype // true
JSON.__proto__ === Object.prototype // true
(3)Function.prototype也是唯一一个typeof XXX.prototype为“function”
的prototype。其它的构造器的prototype都是一个对象。如下
console.log(typeof Function.prototype) // function
console.log(typeof Object.prototype) // object
console.log(typeof Number.prototype) // object
console.log(typeof Boolean.prototype) // object
console.log(typeof String.prototype) // object
console.log(typeof Array.prototype) // object
console.log(typeof RegExp.prototype) // object
console.log(typeof Error.prototype) // object
console.log(typeof Date.prototype) // object
console.log(typeof Object.prototype) // object
2.所有对象的__proto__都指向其构造器的prototype
p.__proto__ === Person.prototype===p.constructor.prototype