逆战班学习总结 js的几种继承方式

Posted 2021-03-08 huanhanyu

JS中继承的概念：

 通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法，我们把这种方式称之为继承

为什么要使用继承？

有些对象会有方法(动作、行为)，而这些方法都是函数，如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费

继承的第一种方式：原型链继承

实例修改父节点上的私有属性指向某子节点继承，缺点是其他相同子类会同时一起改变属性

 

2.继承方式二：借用构造函数

function Father() {
this.arr = [1,2,3]
}

function Son() {
//call的第一个函数是this指向的对象,即构造函数的实例对象
Father.call(this)

/*上面代码等同于下面这段代码：
(function() {
this.arr = [1,2,3]
}).call(this)
*/
}

//解决传参问题：
function Father(name) {
this.name = name
}

function Son(name) {
Father.call(this, name)
}

var son1 = new Son("小名")
console.log(son1.name) //小名

var son2 = new Son("一灯")
console.log(son2.name) //一灯

var son1 = new Son()
console.log(son1.arr) //1,2,3

var son2 = new Son()
son2.arr.push(4)

console.log(son2.arr) //1,2,3,4
console.log(son1.arr) //1,2,3

这种方式是通过构造函数实现的，当然也把构造函数自身的问题带过来了——破坏了复用性。因为每个实例都创建了一份副本。

 

3. 组合继承

组合继承 = 原型链 + 借用构造函数。取其长避其短：共享的用原型链，各自的借用构造函数

function Father(name) {
this.name = name
this.arr = [1,2,3]
}

Father.prototype.getName = function() {
console.log(this.name)
}

function Son(name, age) {
Father.call(this, name)
this.age = age
}

Son.prototype = new Father()
Son.prototype.constructor = Son
Son.prototype.getAge = function() {
console.log(this.age)
}

var son1 = new Son("小米", 23)
son1.arr.push(4)
console.log(son1.arr) //1,2,3,4
son1.getName() //小米
son1.getAge() //23

var son2 = new Son("一心", 24)
console.log(son2.arr) //1,2,3
son1.getName() //一心
son1.getAge() //24