本文地址:http://www.cnblogs.com/veinyin/p/7608282.html
仅支持实现继承,且主要依靠原型链来实现,不过一般会混合构造函数一起实现继承
1 原型链
-
-
继承使用原型链进行传递,类似指针一层层向上指向对应原型,构成链状
-
在使用原型链近似实现继承时,实例中的所有属性和方法都会被继承
1 // 第一个类型 2 function Func1(){ 3 this.property = true; 4 } 5 // 第一个类型的方法 6 Func1.prototype.getFunc1Value = function(){ 7 return this.property; 8 }; 9 10 // 第二个类型 11 function Func2(){ 12 this.func2property = false; 13 } 14 15 // 第一个类型的实例赋给 Func2.prototype,实现继承 ( 替换原型 ) 16 Func2.prototype = new Func1(); 17 18 // 为第二个类型增加了新方法 19 Func2.prototype.getFunc2Value = function(){ 20 return this.func2property; 21 }; 22 23 // 为第二个对象创建实例 24 var out = new Func2(); 25 26 // 利用该实例访问第一个对象方法、属性及第二个对象的方法、属性 27 console.log(out.getFunc1Value()); 28 console.log(out.property); 29 console.log(out.getFunc2Value()); 30 console.log(out.func2property);
继承实质为将父对象的替换为子对象的原型
添加新方法或重写,均要放在替换原型语句后面重写是覆盖掉,原先的还在,子对象实例访问到的是重写的,父对象实例访问的是原先的方法
-
-
-
A 是 B 的实例
A instanceof B; //返回 true 或 false
-
A 是原型
A.prototype.isProptotypeOf(instance); //返回 true 或 false
-
2 借用构造函数
使用 call() 或 apply() 方法借用超类型 ( 父对象 ) 的构造函数
1 // 构造函数1
2 function Func1(){
3 this.colors = ["red","blue","green"];
4 }
5
6 // 构造函数2
7 function Func2(){
8 // 借用构造函数1
9 Func1.call(this);
10 }
11
12 // 创建实例
13 var out2 = new Func2();
14 out2.colors.push("black"); // 为构造函数2的实例增加一个值
15 var out1 = new Func1();
16
17 // 输出可知每次新建实例均借用构造函数1,值不变
18 console.log(out1.colors);
19 console.log(out2.colors);
20 }
效果如下
![](http://i2.muimg.com/567571/2ec75465930d0147.png)
3 传递参数
借用构造函数可以在子类型构造函数中向超类型构造函数传递参数
1 // 构造函数1
2 function Func1(name){
3 this.name = name;
4 }
5
6 // 构造函数2
7 function Func2(){
8 // 借用构造函数1
9 Func1.call(this,"Cherry");
10 this.age = 21;
11 }
12
13 // 创建实例
14 var out2 = new Func2();
15
16 console.log(out2.name);
17 console.log(out2.age);
![](http://i4.buimg.com/567571/4a26114266811efd.png)
4 组合继承
将原型链和借用构造函数技术组合到一块,发挥二者之长。实质为使用原型链实现对原型属性和方法的继承,通过借用构造函数实现对实例属性的继承
组合继承是最常用的继承方法
5 寄生组合式继承
尽管组合继承已经十分好用了,但是由于会两次调用父类型的构造函数,导致效率较低,故提出了寄生组合式继承,仅调用一次父类型的构造函数,提高效率,是实现基于继承的最有效方式
示例:
1 function inheritPrototype(subType, superType) {
2 var prototype = superType.prototype;
3 prototype.constructor = subType;
4 subType.prototype = prototype;
5 }
6
7 function SuperType(name) {
8 this.name = name;
9 colors = ["red", "blue", "green"];
10 }
11
12 SuperType.prototype.sayName = function () {
13 var out1 = document.getElementById("out1");
14 var p = document.createElement("p");
15 p.innerHTML = this.name;
16 out1.appendChild(p);
17 };
18
19 function SubType(name, age) {
20 SuperType.call(this, name);
21 this.age = age;
22 }
23
24 inheritPrototype(SubType, SuperType);
25
26 SubType.prototype.sayAge = function () {
27 var out1 = document.getElementById("out1");
28 var p = document.createElement("p");
29 p.innerHTML = this.age;
30 out1.appendChild(p);
31 };
32
33 var out1 = new SuperType("Bob");
34 var out2 = new SubType("Cherry",21);
35
36 console.log(out1);
37 console.log(out2);
38 out1.sayName();
39 out1.sayAge();
40 out2.sayName();
41 out2.sayAge();
效果如下,其中父类型构造函数没有 age ,故输出为 undefined
![](http://i2.muimg.com/567571/67f9e7d919e14aa9.png)
END~~~≥ω≤