JS继承
一. 原型链继承方式
// 1.原型链继承方式(父类的实例当做子类的原型。如此子类的原型包含父类定义的实例属性,享有父类原型定义的的属性) function SuperType() { // 父类 this.type = 'Somthing Where' } SuperType.prototype.SayValue = function() { return this.type } function SubType () { // 子类 this.name = 'Hello' } SubType.prototype = new SuperType() // 父类的实例当做子类的原型 SubType.prototype.getSayValue = function() { return this.name } var instance = new SubType() // 为什么能直接instance.name访问到,因为在这一步又new了一次,instance就继承了构造函数SubType的属性和方法 console.log(instance.name) // 备注(原型链继承的缺点就是'原型对象的引用属性都是被共享的,不能传递参数')
二. 借用构造函数方式
// 2.借用构造函数(通过在子类构造函数内部调用call()和apply()方法来实现继承) function SuperType(name) { // 父类 this.name = name this.color = ['red', 'yello', 'green'] this.sayName = function() { return this.name } } function SubType() { // 子类(通过在子类构造函数中通过call方法,同时可以传递一些参数) SuperType.call(this, '李四') this.age = ' 23' } var instance = new SubType() console.log(instance) // 备注(借用构造函数的缺点就是不能通过原型prototype来定义方法,这就造成了没法封装一个方法给所有人用,全部要写死在构造函数中,造成内存的浪费)
三. 组合式继承方式
// 组合继承(将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式) function SuperType(name) { // 父类 this.name = name this.color = ['red', 'yello', 'green'] } SuperType.prototype.SayValue = function() { return this.name } function SubType() { // 子类(同样通过call的方式) SuperType.call(this, '李四') this.age = '23' } SubType.prototype = new SuperType() // 同样父类的实例当做子类的原型 SubType.prototype.constructor = SubType // 通过将子类原型的constructor指向子类的构造函数 SubType.prototype.getSubValue = function() { console.log(this.age) } var instance = new SubType() console.log(instance.SayValue()) // 备注(组合继承注意要重新指向子类的构造函数这一步,其他的就是集二者之和,既可以通用处理方法也可以传递参数) // 缺点是调用了两次父类构造函数SuperType.call(this)和new SuperType()
浙公网安备 33010602011771号