JavaScript中的 继承 指的是一个对象没有一些属性和方法,但是另外一个对象有,把另外一个对象的属性和方法拿过来用。
1、混入式继承
使用
for-in
遍历对象1的属性,将所有的属性添加到另一个对象2上,这时候就可以称 “对象2 继承自 对象1” 。
var o = {
}
var obj = {
name:"Tom",
age:18
}
for (var k in obj){
o[k] = obj[k];
}
console.log(o.name); //Tom
2.经典继承
经典继承也叫做 “借用构造函数” 或 “伪造对象” 。其基本思想是:在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象,因此可以通过使用
apply()
和call()
方法也可以在新创建的对象上执行构造函数。(JS高程)
function Object(){
this.colors = ["red","blue","green"];
}
function Obj(){
Object.apply(this); //Obj继承了Object
}
var inst = new Obj();
inst.colors.push("black");
console.log(inst.colors); //"red","blue","green","black"
var inst2 = new Obj();
console.log(inst2.colors);//"red","blue","green"
优势:可以在子类型构造函数中向超类型构造函数传递参数
缺点:无法避免构造函数模式存在的问题——方法都在构造函数中定义,函数复用性差。因此借用构造函数的技术很少单独使用。
3.原型继承
利用原型中的成员可以被和其相关的所有对象共享这一特性,可以实现继承。这种方式实现的继承,称为“原型继承”。
1)通过对象的动态特性,给原型对象中添加成员(不是严格意义上的继承)
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function () {
console.log("Hello");
}
var p = new Person("aaa",20);
p.sayHello();//Hello
//这里的p对象就继承自原型
2)直接替换原型对象
function Person(){
}
Person.prototype.sayHi = function () {
console.log("Hey man");
}
var parent = {
sayHello : function () {
console.log("Hello");
}
}
Person.prototype = parent;
var p = new Person();
p.sayHello();//Hello
p.sayHi(); // Error 替换之后,sayHi方法不复存在
//p对象继承了原型对象(parent对象)
//注意:使用替换原型的方式实现继承的时候,原有原型中的成员就会丢失
3)利用混入的方式给原型对象添加成员
function Person(){
}
Person.prototype.sayHi = function () {
console.log("Hey man");
}
var parent = {
sayHello : function () {
console.log("Hello");
}
}
for(var k in parent){
Person.prototype[k] = parent[k];
}
var p = new Person();
p.sayHello();//Hello
//p对象继承自原型对象
4.组合继承
也称“伪经典继承”。指将原型链和借用构造函数的技术结合到一起,从而发挥出二者长处的一种继承方式。其思路是:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有他自己的属性。(JS高程)
function Object(name){
this.name = name;
this.colors = ["red","blue"];
}
Object.prototype.sayName = function(){
console.log(this.name);
};
function Obj(name,age){
Object.call(this,name);
this.age = age;
}
//继承
Obj.prototype = new Object();
Obj.prototype.constructor = Obj;
Obj.prototype.sayAge = function(){
console.log(this.age);
}
var inst = new Obj("aaa",18);
console.log(inst.colors);//["red","blue"]
inst.sayName();//aaa
inst.sayAge();//18