Javascript继承模式发展史

1.call/apply方法

Grand.prototype.LastName = "Y";function Grand(){}var grand = new Grand();Father.prototype = grand;function Father(){this.name = "hehe";}var father = new Father();Son.prototype = father;function Son(){}var son = new Son();function Person(name,age,sex){this.name = name;this.age = age;this.sex = sex;}function Student(name,age,sex,grade){Person.call(this,name,age,sex);this.grade = grade;}var student = new Student();

2.共有原型实现

     Father.prototype.LastName = "Young";function Father(){}function Son(){}//共有原型Son.prototype = Father.prototype;   var son = new Son();var father = new Father();

运行结果：

3.inherit 转换prototype

将第二种方法进行包装：

Father.prototype.LastName = "Young";function Father(){}function Son(){}function inherit(Target,Origin){Target.prototype = Origin.prototype;}//先继承后应用inherit(Son,Father);Son.prototype.sex =  "male";// 与Father.prototype指向同一空间 ，会改变father有sex属性var son = new Son();var father = new Father();

运行结果：

4.圣杯模式

Father.prototype.LastName = "Young";function Father(){}function Son(){}function inherit(Target,Origin){function F(){};F.prototype = Origin.prototype;Target.prototype = new F();            //与上面一行不能颠倒Target.prototype.constructor = Target;  //son的constructor归位Target.prototype.uber = Origin.prototype;   //储存继承信息}inherit(Son,Father);Son.prototype.sex =  "male";//此时father上面不会出现sex属性var son = new Son();var father = new Father();//son.__proto__ --> new F().__proto__ --> Father.prototype

修改第三种方法的bug。

运行结果：

Final Yahoo inherit()方法

var inherit = (function(){//私有化变量   var F = function F(){};return function(Target,Origin){F.prototype = Origin.prototype;Target.prototype = new F();         //与上面一行不能颠倒Target.prototype.constructor = Target;  //son的constructor归位Target.prototype.uber = Origin.prototype;}  }());

闭包私有化，加大效率。

Mr.J--JS学习（继承模式发展史）相关推荐

oncreate为什么一定要调用父类的oncreat_为什么你老是讲不清楚JS的继承模式
点击上方 "前端技术精选" 关注,星标或者置顶 17点30分准时推送,第一时间送达作者:DBCdouble | 编辑:前端妹来自:juejin.im/post/68696896 ...
为什么你老是讲不清楚js的继承模式
作者:DBCdouble https://juejin.im/post/6869689622676471816 一.前言相信很多人在遇到面试中都遇到过被问到过JavaScript继承模式的问题,都能 ...
（四）JS学习笔记 - 模式 - 观察者模式
理解观察者模式简单的讲,一个对象作为特定任务或是另一对象的活动的观察者,并且在这个任务或活动发生时,利用事件的形式通知观察者. 观察者的使用场合当一个对象的改变需要同时改变其它对象,并且它不知道具 ...
你真的理解JS的继承了吗？
噫吁嚱,js之难,难于上青天学习js的这几年,在原型链和继承上花了不知道多少时间,每当自以为已经吃透它的时候,总是不经意的会出现各种难以理解的幺蛾子.也许就像kyle大佬说的那样,js的继承真的是' ...
js 原型prototype继承模式
js中利用原型prototype的方式实现继承是最常见的继承模式,如果让a的实例继承b,原型prototype的继承方式如下: function A(){} function B(){} A.prot ...
JS 继承各种方法的优劣比较 ----JS 学习笔记（五）
一.原型链继承:基本思想是新建父类的实例,将父类的实例赋给子类的原型对象.这样,子类的原型对象中的 __proto__ 指针就指向父类的原型对象.再新建一个子类的实例,那么子类的实例就同时继承了子类和 ...
面试官问：JS的继承
原文作者若川,掘金链接:https://juejin.im/post/5c433e216fb9a049c15f841b 写于2019年2月20日,现在发到公众号声明原创,之前被<前端大全> ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...
node.js学习笔记5——核心模块1
node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端一: 全局对象 Node. ...

Mr.J--JS学习（继承模式发展史）

Javascript继承模式发展史

1.call/apply方法

2.共有原型实现

3.inherit 转换prototype

4.圣杯模式

Final Yahoo inherit()方法

Mr.J--JS学习（继承模式发展史）相关推荐

最新文章

热门文章