继承分为 接口继承 和 实现继承 ;接口继承只继承方法签名,实现继承则继承实际的方法;由于函数没有签名,所以ECMAScript 中没有接口继承,只能依靠 原型链 来实现实现继承。
基本思想是利用原型链让一个引用类型继承另一个引用类型的属性和方法:
如:Person2.prototype 是Person1.prototype 的继承,那么(“--->” 意为“指向”):
Person2.prototype - [[Prototype]] ---> Person1.prototype Person2 - prototype ---> Person2 person2 - [[Prototype]] ---> Person2.prototype //Person2.prototype 无 constructor Person1.prototype - cunstructor ---> Person1 Person1 - prototype ---> Person1.prototype person1 - [[Prototype]] ---> Person1.prototype
具体如何继承呢:
function People(){}; //原始的 People.prototype.sayWorld = function(){ return "World people" }; function Person(){}; //继承的 Person.prototype = new People(); //这里应该注意要先继承 Person.prototype.sayNation = function(){ //然后再修改prototype return "Chinese people" }; var person = new Person(); //实例 console.log(person.sayNation()); //Chinese people console.log(person.sayWorld()); //World people
再举个例子:
function WorldPeople(){}; WorldPeople.prototype = { constructor: WorldPeople, color: "", say: function(){ return "People in the Earth." }, friends: ["Oliver","Alice","Troy"] }; function Chinese(){}; Chinese.prototype = new WorldPeople(); Chinese.prototype.color = "yellow"; Chinese.prototype.say = function(){ return "i am Chinese." }; var person1 = new Chinese(); console.log(person1.friends.toString()); console.log(person1.color); console.log(person1.say()); /* [Log] Oliver,Alice,Troy (repetition.html, line 163) [Log] yellow (repetition.html, line 164) [Log] i am Chinese. (repetition.html, line 165) */
用 instanceof
操作符和 insPrototypeOf()
方法即可,如:
console.log(person1 instanceof Object); //true; console.log(person1 instanceof WorldPeople); //true; console.log(person1 instanceof Chinese); //true; console.log(Object.prototype.isPrototypeOf(person1)); //true console.log(WorldPeople.prototype.isPrototypeOf(person1)); //true console.log(Chinese.prototype.isPrototypeOf(person1)); //true
包含引用类型值的原型,该属性会被所有实例共享;
在创建子类型的实例时,不能向超类型的构造函数中传递参数;
对于第一种问题:
function People(){} People.prototype.friends = ["Alice","Oliver"]; function Person(){}; Person.prototype = new People(); var person1 = new Person(); var person2 = new People(); person1.friends.push("Troy"); console.log(person1.friends); console.log(person2.friends); //两者完全相同
有什么解决办法呢:
被称为“借用构造函数”的技术或伪造对象或经典继承。如:
function People(){ this.friends = ["Alice","Oliver"]; } function Person(){ People.call(this); //继承了People } //这里就不必写Person.prototype = new People() var person1 = new Person(); var person2 = new Person(); person1.friends.push("Troy"); console.log(person1.friends); //["Alice", "Oliver", "Troy"] console.log(person2.friends); //["Alice", "Oliver"]
该方法的主要优势就是可以在子类型构造函数中向超类型构造函数传递参数。
又如:
function SuperType(name){ this.name = name; } function SubType(){ SuperType.call(this,"Oliver"); //这里不仅仅继承了SuperType,而且还向它传递了参数 this.age = 18; } var person = new SubType(); console.log(person.name); //Oliver console.log(person.age); //18
也叫做伪经典继承。如:
//不通用的属性 function SuperType(name){ this.name = name; this.colors = ["Blue","Red","Black"]; } //通用的方法 SuperType.prototype.sayName = function(){ return (this.name); }; //继承属性并新增属性 function SubType(name,age){ SuperType.call(this,name);//继承属性 this.age = age;//新增属性 } //继承方法并新增方法 SubType.prototype = new SuperType();//继承方法 SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){//新增方法 return (this.age); }; var person1 = new SubType("Oliver",18); var person2 = new SubType("Troy",24); person1.colors.pop(); console.log(person1.colors); console.log(person2.colors); console.log(person1.sayName() + person1.sayAge()); console.log(person2.sayName() + person2.sayAge()); /* [Log] ["Blue", "Red"] (repetition.html, line 255) [Log] ["Blue", "Red", "Black"] (repetition.html, line 256) [Log] Oliver18 (repetition.html, line 257) [Log] Troy24 (repetition.html, line 258) */
最常用的方法。再举个例子:
function People(name,age){ this.name = name; this.age = age; this.friends = []; } People.prototype.friendsList = function(){ document.write(this.friends.toString()); }; function Person(name,age,color,job){ People.call(this,name,age); this.color = color; this.job = job; } Person.prototype = new People(); Person.prototype.constructor = Person; Person.prototype.sayInfo = function(){ document.write(this.name + this.age + this.color + this.job); }; var person1 = new Person("Oliver",18,"yellow","Hero"); person1.friends.push("Alice"); person1.sayInfo(); //Oliver18yellowHero person1.friendsList(); //Alice var person2 = new Person("Troy",24,"White","Fighter"); person2.friends.push("Oliver","Islan"); person2.sayInfo(); //Troy24WhiteFighter person2.friendsList(); //Oliver,Islan
function Cars(name){ this.name = name; this.hasColor = ["blue","black"]; } Cars.prototype.sayName = function(){ console.log(this.name); }; function Car(name,color){ Cars.call(this,name); this.color = color; } Car.prototype = new Cars(); Car.prototype.constructor = Car; Car.prototype.sayColor = function(){ console.log(this.color); }; var benz = new Car("Benz-C200","Black"); benz.hasColor.push("red"); benz.sayName(); benz.sayColor(); console.log(benz.hasColor); var benz2 = new Car("Benz-C180","White"); benz2.hasColor.push("white"); benz2.sayName(); benz2.sayColor(); console.log(benz2.hasColor); /* [Log] Benz-C200 (repetition.html, line 309) [Log] Black (repetition.html, line 319) [Log] ["blue", "black", "red"] (repetition.html, line 325) [Log] Benz-C180 (repetition.html, line 309) [Log] White (repetition.html, line 319) [Log] ["blue", "black", "white"] (repetition.html, line 330) */
结合创建对象和继承对象,来一个比较吧:
//组合使用构造函数模式和原型模式-创建对象 function Person(name,age){ this.name = name; this.age = age; this.friendsList = ["Alice","Islan"]; } Person.prototype.friends = function(){ console.log(this.friendsList.toString()); }; var person1 = new Person("Oliver",18); var person2 = new Person("Troy",24); person1.friendsList.pop(); person1.friends(); //Alice person2.friends(); //Alice,Islan
//组合继承-继承对象 function Person(name,age){ this.name = name; this.age = age; this.friendsList = ["Alice","Islan"]; } Person.prototype.friends = function(){ console.log(this.friendsList.toString()); }; function Info(name,age,job){ Person.call(this,name,age); this.job = job; } Info.prototype = new Person(); Info.prototype.constructor = Info; Info.prototype.sayJob = function(){ console.log(this.job); }; var person1 = new Info("Oliver",18,"Master"); var person2 = new Info("Troy",24,"Hero"); person1.friendsList.pop(); person1.friends(); //Alice person2.friends(); //Alice,Islan person1.sayJob(); //Master person2.sayJob(); //Hero
通常只是想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。共享相应的引用类型的值的属性。
语法是:
function object(o){ function F(){}; F.prototype = o; return new F(); }
如:
function object(o){ function F(){}; F.prototype = o; return new F(); } var person = { name: "Oliver", friends: ["Alice","Islan"] }; var anotherPerson = object(person); anotherPerson.name = "Troy"; anotherPerson.friends.push("Ellen"); var yetAnotherPerson = object(person); yetAnotherPerson.name = "Ellen"; yetAnotherPerson.friends.push("Troy","Oliver"); console.log(person.friends);
又如:
function object(o){ function F(){}; F.prototype = o; return new F(); } var person = { name: "Oliver", friends: ["Alice","Islan"] }; var anotherPerson = object(person); anotherPerson.name = "Troy"; anotherPerson.friends.push("Oliver"); console.log(person.friends);["Alice", "Islan", "Oliver"]
这种方法比较简单,只是想让person 和anotherPerson 保持类似并共享引用类型的值的属性。
创建一个封装继承过程的函数而已:
function createAnotherObj(obj){ var clone = obj; clone.sayHi = function(){ console.log("hi"); }; return clone; } var person = { name: "Troy", friends: ["Alice"] }; var anotherObj = createAnotherObj(person); anotherObj.sayHi(); anotherObj.name = "Oliver"; anotherObj.friends.push("Ellen"); console.log(person.friends); console.log(anotherObj.friends); //两个完全一样
基本逻辑就是首先创建一个超类型原型的一个副本;然后为副本添加constructor 属性;最后把副本赋值给子类型的原型。如:
function inheritPrototype(SubType,SuperType){ var prototype = Object(SuperType.prototype); prototype.constructor = SubType; SubType.prototype = prototype; } function SuperType(name){ this.name = name; this.color = ["red","yellow"]; } SuperType.prototype.list = function(){ console.log(this.color.toString()); }; function SubType(name,age){ SuperType.call(this,name); this.age = age; } inheritPrototype(SubType,SuperType); SubType.prototype.sayName = function(){ console.log(this.name); }; var type1 = new SubType("Oliver",18); var type2 = new SubType("Troy",24) type2.color.pop(); type1.list(); //red,yellow type2.list(); //red