js 中的五种继承方法
来源:互联网 发布:centos wordpress环境 编辑:程序博客网 时间:2024/05/29 03:52
正式发布的ES6中已经封装实现了其他OO语言中的继承形式,Class Extends,这里主要记录js的原型继承和借用构造函数继承
一、原型链继承
function Super(){ this.name="小明";}Super.prototype.sayName = function(){ alert(this.name)};function Sub(){}Sub.prototype = new Super();var instance = new Sub();instance.sayName();//小明
原型链继承的问题
//当超类中包含引用类型属性值时,其中一个子类的多个实例中,只要其中一个实例引用属性只发生修改一个修改,其他实例的引用类型属性值也会立即发生改变//原因是超类的属性变成子类的原型属性function Super(){this.name="小明"; this.friends = ['小红','小强'];}Super.prototype.sayName = function(){ alert(this.name)};function Sub(){}Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();instance1.friends.push('张三');console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强", "张三"]
二、借用构造函数继承
function Super(){this.name="小明"; this.friends = ['小红','小强'];}Super.prototype.sayName = function(){ alert(this.name)};function Sub(){ Super.call(this);}var instance1 = new Sub();var instance2 = new Sub();instance1.friends.push('张三');console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]
借用构造函数的问题
单独使用借用构造函数,没办法继承超类中的原型属性和方法
三、组合式继承(原型继承+借用构造函数继承)
组合式继承也是实际开发中最常用的继承方式
function Super(){this.name="小明"; this.friends = ['小红','小强'];}Super.prototype.sayName = function(){ alert(this.name)};function Sub(){ Super.call(this);}Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();instance1.friends.push('张三');console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]instance1.sayName();//小明instance2.sayName();//小明
组合式继承的问题
//组合式继承中,超类的构造函数将被调用两次function Super(){this.name="小明"; this.friends = ['小红','小强'];}Super.prototype.sayName = function(){ alert(this.name)};function Sub(){ Super.call(this);//第二次调用}Sub.prototype = new Super();//第一次调用var instance = new Sub();
四、寄生式继承
//在主要考虑对象而不是自己定义类型和构造函数的情况下,寄生式继承是一种有用的模式,但无法做到函数的复用 function createAnother(original){ var clone = Object(original);//创建一个新对象,original的副本 clone.sayName = function(){ //对象的增强,添加额外的方法 alert('hi'); } return clone;}var person = { name:'小明', friends:['小红','小强']}var person1 = createAnother(person);var person2 = createAnother(person);person1.friends.push('张三');console.log(person.friends);//["小红", "小强", "张三"]console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强", "张三"]
寄生组合式继承
//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题function inheritPrototype(sub,superr){var prototype = Object.create(superr.prototype);//ES5中创建对象副本的方法 prototype.constructor = superr; //弥补重写原型失去的默认constructor属性 sub.prototype = prototype;}function Super(name){ this.name = name; this.friends = ['小红','小强'];}Super.prototype.sayName = function(){ alert(this.name);}function Sub(name){ Super.call(this,name);}inheritPrototype(Sub,Super);var person1 = new Sub('小明');var person2 = new Sub('小华');person1.friends.push('张三');console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强"]console.log(person1.sayName());//小明console.log(person2.sayName());//小华
0 0
- js 中的五种继承方法
- 学习记录--js中的五种继承方式
- js继承中的方法重写
- JS(五)继承
- 使用JS中的Call方法实现继承和多重继承
- js两种继承方法
- 关于js oop,继承实现的5、6、7、8种方法中的最佳方法
- js如何实现继承(js实现继承的五种方式)
- 黑马程序员--js如何实现继承(js实现继承的五种方式)
- js如何实现继承(js实现继承的五种方式)
- js中的子类继承父类的方法和属性
- JS中的call()和apply()方法- 实现继承
- js中的几种继承方式
- JS 中的继承
- js中的继承实现
- js中的继承实现
- JS中的继承实现
- js中的继承实现
- 求二进制数中1的个数
- iOS开发面试题:堆和栈的区别
- HTTP 和 HTTPS 的区别
- 首地址相加
- iOS开发篇小知识 - CATransform3D的基本属性
- js 中的五种继承方法
- 软中断和硬中断
- InnoDB 在不同隔离级别下的一致性读及锁的差异
- Android开发必须把握的七大开源项目
- windows下的MySql:登陆退出
- Ajax模式Edit页面支持JS,操作页面表单AjaxEdit.js
- [FAQ08887]如何使用Trace32分析NE问题?
- 安卓学习笔记--拥抱 SVG:苦恼于图片适配 in Android?
- android添加常驻图标到状态栏