网站开发 jz.woonl,手机网站导航特效,wordpress 登出,网站关键词快速排名优化上篇文章给大家分享了 js继承中的原型链继承
web前端tips#xff1a;js继承——原型链继承
在文章末尾#xff0c;我提到了 原型链的继承#xff0c;子类需要传递参数给父类的构造函数#xff0c;就无法通过直接调用父类的构造函数来实现#xff0c;需要通过中间的过程来…
上篇文章给大家分享了 js继承中的原型链继承
web前端tipsjs继承——原型链继承
在文章末尾我提到了 原型链的继承子类需要传递参数给父类的构造函数就无法通过直接调用父类的构造函数来实现需要通过中间的过程来传递参数 那这篇文章也就能解决这个传参问题了。
借用构造函数继承
又叫经典继承它通过在子类构造函数中调用父类构造函数来继承父类的属性和方法。
借用构造函数继承的核心思想是在子类构造函数中使用 call() 或 apply() 方法调用父类构造函数并将子类实例作为参数传递给父类构造函数。这样就能够在子类实例中创建父类的属性并且每个子类实例都有它们自己的属性副本。
以下是借用构造函数继承的基本步骤
定义父类构造函数设置父类的属性和方法。定义子类构造函数使用 Parent.call(this, ...) 在子类中调用父类构造函数并传递子类特有的参数。在子类构造函数中定义子类的属性和方法。
// 1
function Parent(name) {this.name namethis.arr [1,2,3]
}// 2
function Child(name, age) {// 借用父类构造函数Parent.call(this, name)this.age age
}// 实例化
var child new Child(我是 child, 666)
child.name // 我是 child
child.arr // [1,2,3]
child.age // 666通过以上步骤我们就实现了简单的借用构造函数继承也解决了原型链继承传参问题。
并且由于每个子类实例都有它们自己的属性副本所以对属性修改是不会互相影响的
var child1 new Child(我是 child1, 111)
var child2 new Child(我是 child2, 222)
child1.arr.push(4)
child1.arr // [1,2,3,4]
child2.arr // [1,2,3]优点
子类实例具有独立的属性不会共享父类实例的属性。子类可以向父类构造函数传递参数。
缺点
无法继承父类原型链上的方法和属性只能继承父类构造函数中的属性和方法。
function Parent(name) {this.arr [1,2,3]
}
Parent.prototype.getArr function() {return this.arr
}
function Child() {// 借用父类构造函数Parent.call(this)
}
// 实例化
var child new Child()
child.getArr() // Uncaught TypeError: child.getArr is not a function父类的方法无法复用每个子类实例都会创建一份方法的副本。
需要注意的是借用构造函数继承只是继承了父类构造函数中的属性和方法并没有真正实现完全的继承。如果希望子类也能继承父类的原型链上的方法和属性可以使用其他方式如组合继承、寄生组合继承等。
结语
牵手 持续为你分享各类知识和软件 欢迎访问、关注、讨论 并留下你的小心心❤
