js中的继承

1、原型继承

原型继承的特点：即继承了父类的模版，又继承了父类的原型对象

// 父类
function Person(name, age) {
this.name = name;
this.age = age;
}
// 父类的原型对象方法
/*Person.prototype.say = function() {
console.log('hello');
}*/

Person.prototype = {
constructor: Person,
say: function (){
console.log(this.name)
}
}

// 子类
function Boy(sex) {
this.sex = sex;
}
Boy.prototype = new Person('zn',18);
var b = new Boy();
console.log(b.name);
console.log(b.age);
b.say();

2、类继承(只继承模版, 不继承原型对象) (借用构造函数的方式继承)

// 父类
function Person(name, age) {
this.name = name;
this.age  = age;
}
// 父类的原型对象属性
Person.prototype.id = 1;

// 子类
function Boy(name, age, sex) {
// call apply
Person.call(this, name, age);
this.sex = sex;
}
var b = new Boy('张三', 20, '男');
console.log(b.name);
console.log(b.age);
console.log(b.sex);
console.log(b.id);

3、混合继承（借用构造函数继承 + 原型继承）

// 父类
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.id = 1;

Person.prototype = {
constructor: Person;
sayName: function () {
console.log(this.name);
}
}
// 子类
function Boy(name, age, sex) {
// 借用构造函数继承
Person.call(this, name, age);
this.sex = sex;
}
// 原型继承
//继承父类的原型对象
Boy.prototype = new Person();
var b = new Boy('zn', 18, '男');
console.log(b.name);
console.log(b.sex);
console.log(b.age);
b.sayName();

4、ES5 提供的create方法 在实际开发过程中为了兼容低版本浏览器做出继承方法如下封装

var create = function(obj) {
//(火狐 谷歌等)
if (Object.create) {
return Object.create(obj);
}
else {
//(ie 低版本)
function F() {}
F.prototype = obj;
return new F();
}
}