js 继承的几种方式
2019-04-18 08:59:47来源:博客园 阅读 ()
JS继承的实现方式:
既然要实现继承,那么首先我们得有一个父类,代码如下:
function Animal(name) { // 属性 this.name = name || '小白'; // 实例方法 this.sleep = function () { console.log(this.name + '正在睡懒觉!'); } //实例引用属性 this.features = ['11', '22']; } // 原型方法 Animal.prototype.eat = function (food) { console.log(this.name + '正在吃:' + food); };
1、原型链继承
核心: 将父类的实例作为子类的原型
function Cat(name) {} //把Cat的原型指向Animal Cat.prototype = new Animal(); var tom = new Cat('Tom'); var kissy = new Cat('Kissy'); console.log(tom.name); // "小白" console.log(kissy.name); // "小白" console.log(tom.features); // ["11", "22"] console.log(kissy.features); // ["11", "22"] tom.name = '小黑'; tom.features.push('33'); //针对父类实例值类型成员的更改,不影响 console.log(tom.name); // "小黑" console.log(kissy.name); // "小白" //针对父类实例引用类型成员的更改,会通过影响其他子类实例 console.log(tom.features); // ["11", "22", "33"] console.log(kissy.features); // ["11", "22", "33"]
2、构造继承
核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
function Cat(name) { Animal.call(this); this.name = name || '小黑'; } var cat = new Cat(); var animl = new Animal(); console.log(cat.name);//小黑 cat.sleep();//小黑正在睡懒觉 console.log(animl.name);//小白 animl.name = '大黄'; console.log(animl.name);//大黄 cat.sleep();//小黑正在睡懒觉! console.log(cat.name);//小黑 console.log(cat instanceof Animal); // false console.log(cat instanceof Cat); // true
3、实例继承
核心:为父类实例添加新特性,作为子类实例返回
function Cat(name) { var instance = new Animal(); instance.name = name || '小黑'; return instance; } var cat = new Cat(); console.log(cat.name);//小黑 cat.sleep();//小黑正在睡懒觉! cat.features.push('33') console.log(cat.features);//["11", "22", "33"] console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); // false
4、拷贝继承
核心:通过for循环去拷贝父类的每一个对象
//通过循环去copy父类的每一项 function Cat(name) { var animal = new Animal(); for (var p in animal) { Cat.prototype[p] = animal[p]; } Cat.prototype.name = name || '小黑'; } var cat = new Cat(); console.log(cat.name);//小黑 cat.sleep();//小黑正在睡懒觉! console.log(cat instanceof Animal); // false console.log(cat instanceof Cat); // true
5、组合继承
核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } Person.prototype.sayHi = function () { console.log("我是Person的方法"); }; function Student(name, age, sex, score) { //借用构造函数:属性值重复的问题 Person.call(this, name, age, sex); this.score = score; } //改变原型指向----继承 Student.prototype = new Person(); //不传值 //把原型的指向改回原来 Student.prototype.constructor = Student; Student.prototype.eat = function () { console.log("我是Student的方法"); }; var stu = new Student("小黑", 20, "男", "100分"); console.log(stu.name, stu.age, stu.sex, stu.score);//小黑 20 男 100分 stu.sayHi();//我是Person的方法 stu.eat();//我是Student的方法
原文链接:https://www.cnblogs.com/wanguofeng/p/10718804.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:js基础复习点
- jQuery异步提交表单的两种方式 2020-03-12
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
- js调用刷新界面的几种方式 2020-03-05
- jquery遍历筛选数组的几种方法和遍历解析json对象 2020-02-29
- 深入理解JavaScript是如何实现继承的 2020-02-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash