javascript 之继承-15
2018-06-24 01:24:25来源:未知 阅读 ()
继承
所谓继承就是子类继承父类的特征与行为,使得子类对象具与父类相同的行为。但是javascript 是没有class、抽象类、接口等抽象概念,javascript 只有对象,那么js中是如何让对象与对象之间产生继承关系呢?
基于对象的继承
在原型链中说过,如果在对象上没有找到需要的属性或者方法引用,js引擎就会继续在内部属性[[prototype]] 指向的对象上进行查找。同理如果还是没有找到需要的引用,就会继续查找它的内部属性[[prototype]]指向的对象,以此类推,层层向上直到找到对象的原型为null为止,这一系列的链接称为原型链。所以在原型链中我才会js中的继承是基于原型实现;
_proto_ 设计机制
任何对象都有一个特殊的内部属性[[prototype]],[[prototype]]机制就是建立起对象之间的内部链接。如果有过后台开发经验的肯定会纳闷,为什么js要这样设计?引入原型对象的意义又是什么?为什么不跟java、.net 一样设计calss等等凝惑, 这里推荐 阮一峰的《Javascript继承机制的设计思想》;
组合继承
组合继承是比较常用的一种继承方法,思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性。
1 //人 2 function Person(name, age) { 3 this.name = name; 4 this.age = age; 5 } 6 Person.prototype.SayName = function () { 7 return this.name; 8 }; 9 //父亲 10 function Parent(work, country, name, age) { 11 this.work = work; 12 this.country = country; 13 this.parentInfo = function () { 14 return 'hello 大家好,我叫:' + this.name +' 我是一名:' + this.work + ',我来自:' + this.country; 15 } 16 Person.call(this, name, age);//父类型传参 17 } 18 Parent.prototype = new Person();//重写Parent的原型对象,让parent的prototype 指向 Person 的实例 19 var myParent = new Parent('manager', 'China', 'Joel', 22); 20 console.log(myParent.SayName());//Joel 21 console.log(myParent.parentInfo());//hello 大家好,我叫:Joel 我是一名:manager,我来自:China 22 23 //儿子 24 function Child(work, country, name, age, sex) { 25 this.sex = sex; 26 this.childInfo = function () { 27 return 'hello 大家好,我叫:' + this.name + ' 我是一名:' + this.work + ',我来自美丽的:' + this.country
+ ',我是一个活泼可爱的 ' + this.sex; 28 } 29 Parent.call(this, work, country, name, age);//父类型传参 30 } 31 32 Child.prototype = new Parent();//重写Child的原型对象,让Child的prototype 指向 Parent 的实例 33 var myBaby = new Child('child', '广州', '超级飞侠-多多', 3, 'girl'); 34 console.log(myBaby.parentInfo());//hello 我是一名:child,我来自:广州 35 console.log(myBaby.childInfo());//hello 大家好,我叫:超级飞侠-多多 我是一名:child,我来自美丽的:广州,我是一个活泼可爱的 girl
这里基类是人,子类是父亲、儿子,这里通过重写原型对象以及在构造函数中调用父类的构造函数,并且用call改变了this 指针,从而达到儿子继承了父亲,父亲继承了人;
new 操作符
重要的事情在这里说一次,之前在原型链中已经提过一次;
MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new 的解释
当使用new去调用构造函数时,相当于执行了
1 var o = {}; 2 o.__proto__ = F.prototype;//实例跟原型对象之间建立了链接,实例跟构造函数之间没有关系; 3 F.call(o);
总结
- 对象之间的链接通过[[prototype]]进行关联
- new 操作符关键点
- prototype 是函数对象的属性,_proto_ 是实例的内部属性[[prototype]]
- 原型链是沿着_proto_链接进行查找
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
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