js 对象的继承
前言:面向对象编程很重要的一个方面,就是对象的继承。A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。
1、原型式继承
JavaScript 继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。也就是说,如果属性和方法定义在原型上,那么所有实例对象就能共享。
借用构造函数的prototype属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function Animal(name) { this .name = name; } Animal.prototype.color = 'white' ; var cat1 = new Animal( '大毛' ); var cat2 = new Animal( '二毛' ); cat1.color // 'white' cat2.color // 'white' //如果实例对象自身就有某个属性或方法,它就不会再去原型对象寻找这个属性或方法。 cat1.color = 'black' ; cat1.color // 'black' cat2.color // 'yellow' Animal.prototype.color // 'yellow'; |
总结一下,原型对象的作用,就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因,而实例对象可以视作从原型对象衍生出来的子对象。
2、构造函数式继承
1 2 3 4 5 6 7 8 9 10 | function Sub(value) { Super.call( this ); this .prop = value; } //上面代码中,Sub是子类的构造函数,this是子类的实例。在实例上调用父类的构造函数Super,就会让子类实例具有父类实例的属性。 Sub.prototype = Object.create(Super.prototype); Sub.prototype.constructor = Sub; Sub.prototype.method = '...' ; //上面代码中,Sub.prototype是子类的原型,要将它赋值为Object.create(Super.prototype),而不是直接等于Super.prototype。否则后面两行对Sub.prototype的操作,会连父类的原型Super.prototype一起修改掉。 |
3、混入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function M1() { this .hello = 'hello' ; } function M2() { this .world = 'world' ; } function S() { M1.call( this ); M2.call( this ); } // 继承 M1 S.prototype = Object.create(M1.prototype); // 继承链上加入 M2 Object.assign(S.prototype, M2.prototype); // 指定构造函数 S.prototype.constructor = S; var s = new S(); s.hello // 'hello' s.world // 'world' |
子类S
同时继承了父类M1
和M2
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步