- 原型链继承
Proson方法通过new的方式赋值给Chid原型链从而继承原型链的方法以及属性
// 原型链继承
function Proson() {
this.name = '小美'
this.age = 18
}
Proson.prototype.getProson = function () {
console.log(this.name, );
}
function Chid() {
}
Chid.prototype = new Proson()
let demo = new Chid()
demo.getProson() //小美
- 构造函数继承
只能继承普通方法及属性，不能继承原型链的属性方法,每创建一个新的实例都会去调用一次父级Proson方法（可优化）
function Proson() {
this.name = '小美'
this.age = 18
console.log(this); //Chid {name: "小美", age: 18}
}
// 通过call把Proson的指向改到Chid
function Chid(name, age) {
Proson.call(this)
this.name = name || this.name
this.age = age || this.age
}
let demo = new Chid('孙悟空')
console.log(demo); //Chid {name: "孙悟空", age: 18}
- 组合继承
通过原型链继承和构造函数继承达到方法的复用，以及新引入的每一个实例都是私有的
function Proson() {
this.name = '小美'
this.age = 18
}
Proson.prototype.getProson = function () {
console.log(this.name);
}
function Chid(name, age) {
//此时Proson的this指向Chid
Proson.call(this)
this.name = name || this.name
this.age = age || this.age
}
// 把Proson方法通过new的方式赋值给Chid原型链从而继承原型链的方法以及属性
Chid.prototype = new Proson()
let demo = new Chid('孙悟空')
demo.getProson() //孙悟空
- 原型式继承
Proson通过传入一个对象，把对象赋值到Fn方法的原型链上面，可添加任意的属性方法,但是每一个实例都会继承Proson的原型属性
function Proson(obj) {
function Fn() {}
Fn.prototype = obj
return new Fn()
}
const obj = {
name: '夏美',
age: 19,
getFn: function () {
console.log('this=>', this);
},
arr: ['搜索', '查询']
}
let demo = Proson(obj)
demo.getFn()
let demo2 = Proson(obj)
demo2.arr.push('修改') //原型属性共享，demo.arr也会有修改这个值
console.log(demo2, demo);
- 寄生式继承
Child通过传入一个对象，通过Object.create创建一个新对象,新对象可以继承传入对象的属性方法
function Child(parameterObj) {
let _obj = Object.create(parameterObj)
obj.getName = function () {
console.log('getName:this=>', this) //this指向一个创建后的对象_obj,_obj继承传入的parameterObj属性方法
this.arr.push('修改')
}
return _obj
}
const obj = {
name: '夏美',
age: 19,
getFn: function () {
console.log('getFn:this=>', this);
},
arr: ['搜索', '查询']
}
const demo = new Child(obj)
- 寄生式组合继承
核心概要：proTo作为中间纽扣，传入两个方法，把第fnCre的原型通过Object.create继承给obj，再把obj赋值给fn.prototype参数，使得原型链的方法能继承，并且通过new创建的对象不管几次，而proTo方法只调用了一次父级
function Proson(name) {
this.name = name
this.age = 18
}
Proson.prototype.getFn = function () {
console.log('getFn:this=>', this);
}
// 通过apply改变Child的this指向
function Child(name, age) {
Proson.apply(this, [name])
this.name = name || this.name
this.age = age || this.age
}
function proTo(fn, fnCre) {
let obj = Object.create(fnCre.prototype)
fn.prototype = obj
}
proTo(Child, Proson)
const demo = new Child('小美')
demo.getFn()
- Object.create
Object.create:接受两个参数都是非必传的：
1、接受一个对象，对象的方法属性都继承到新对象；
2、新对象可以指定有哪一些属性及方法
const obj = {
name: '夏美',
age: 19,
getFn: function () {
console.log('this=>', this);
},
arr: ['搜索', '查询']
}
// 第二个参数指定属性：sex,setName
const demo = Object.create(obj, {
sex: {
value: '女'
},
setName: {
value: function (name) {
this.name = name
console.log(this);
}
}
})
console.log(demo); //{sex: "女", setName: ƒ}
