使用Object.create()实现继承
一、常见继承方式
我们日常开发中常见的继承方式主要有: 1、默认模式:
Child.prototype = new Parent();
2、借用构造函数:
function Child(a, b, c, d) {
Parent.apply(this, arguments);
}
3、借用和设置原型:
function Child(a, b, c, d) {
Parent.apply(this, arguments);
}
Child.prototype = new Parent();
4、共享原型:
Child.prototype = Parent.prototype;
5、使用临时构造函数:
var Proxy = function() {};
Proxy.prototype = Parent.prototype;
Child.prototype = new Proxy();
6、extend属性复制:
function extend(parent, child) {
child = child || {}; for(var key in parent) {
if(parent.hasOwnProperty(key)) {
child[key] = parent[key];
}
} return child;
}
当然在一些javascript库中(jQuery),还存在浅复制和深复制。 7、原型继承模式:
Object.create(Parent);
二、Object.create实现继承
本文将来学习第七种继承方式Object.create()方法来实现继承,关于此方法的详细描述,请戳这里。下面来通过几个实例来学习该方法的使用:
var Parent = {
getName: function() {
return this.name;
}
} var child = Object.create(Parent, {
name: { value: "Benjamin"},
url : { value: "http://www.zuojj.com"}
}); //Outputs: Object {name: "Benjamin", url: "http://www.zuojj.com", getName: function}
console.log(child); //Outputs: Benjamin
console.log(child.getName());
我们再来看一个例子,再添加一个继承:
var Parent = {
getName: function() {
return this.name;
},
getSex: function() {
return this.sex;
}
} var Child = Object.create(Parent, {
name: { value: "Benjamin"},
url : { value: "http://www.zuojj.com"}
}); var SubChild = Object.create(Child, {
name: {value: "zuojj"},
sex : {value: "male"}
}) //Outputs: http://wwww.zuojj.com
console.log(SubChild.url); //Outputs: zuojj
console.log(SubChild.getName()); //Outputs: undefined
console.log(Child.sex); //Outputs: Benjamin
console.log(Child.getName());
通过上面可以看出Object.create()方法实现了链式继承,及原型链的继承。如果在控制台打印出各个生成的对象,可以很清楚的看到。
//Outputs: true
console.log(Child.isPrototypeOf(SubChild));
//Outputs: true
console.log(Parent.isPrototypeOf(Child));
isPrototypeOf() 方法测试一个对象是否存在于另一个对象的原型链上。 以上就是本文对Object.create方法的描述,文中不妥之处,还望批评指正。
使用Object.create()实现继承的更多相关文章
- 使用Object.create()实现继承 用 Object.create实现类式继承
使用Object.create()实现继承:https://www.cnblogs.com/cuew1987/p/4075027.html 用 Object.create实现类式继承:https:// ...
- 使用 Object.create实现js 继承
二.Object.create实现继承 本文将来学习第七种继承方式Object.create()方法来实现继承,关于此方法的详细描述,请戳这里.下面来通过几个实例来学习该方法的使用: var Pare ...
- javascript Object.create()究竟发生了什么
这是我在博客园的第一篇博客,早上看了一个大牛的博客,关于javascript继承的,对于大牛使用Object.create()实现继承的方式觉得点问题,就自己研究了一下,所以就有了这篇帖子. 本帖 ...
- js Object.create 初探
1.作用 Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__. https://developer.mozilla.org/zh-CN/docs/W ...
- 使用Object.create 克隆对象以及实现单继承
var Plane = function () { this.blood = 100; this.attack = 1; this.defense = 1; }; var plane = new Pl ...
- 构造函数创建对象和Object.create()实现继承
第一个方法用构造函数创建对象,实现方法的继承 /*创建一个对象把所有公用的属性和方法,放进去*/ function Person() { this.name = "W3cplus" ...
- js继承之Object.create()
通过 Object.create() 方法,使用一个指定的原型对象和一个额外的属性对象创建一个新对象.这是一个用于对象创建.继承和重用的强大的新接口.说直白点,就是一个新的对象可以继承一个对象的属性, ...
- js 继承,Object.setPrototypeOf | Object.getPrototypeOf | Object.create class
https://juejin.im/post/5cfd9d30f265da1b94213d28#heading-14 https://juejin.im/post/5d124a12f265da1b91 ...
- 使用 Object.create 创建对象,super 关键字,class 关键字
ECMAScript 5 中引入了一个新方法:Object.create().可以调用这个方法来创建一个新对象.新对象的原型就是调用 create 方法时传入的第一个参数: var a = {a: 1 ...
随机推荐
- Sql Server-使用Sql Server自带的分词功能实现字段关键词提取(分词能力很低,慎用)
“创建全文索引 启动服务 在SQL Server配置管理工具中,找到'SQL Full-text Filter Daemon Launcher'服务用本地用户启动. 创建全文目录 打开需要创建全文目录 ...
- Synergy使用(安装及配置)
最近在看一篇文章,找到了一款符合我需求的软件:Synergy. Synergy可以在多台电脑上进行鼠标与键盘及剪贴板(只能共享文本)的共享.不用每台电脑都插上这些外设了... 共享文件可以参看微软出品 ...
- mysql中的blob和text区别
经过查询资料发现 除了blob 还有tinyblob longblob mediumblob 当然text还有tinytext mediumtext longtext 都是最为大的存储 本质区别主要是 ...
- java CPU 100% 排查
一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环. (友情提示:本博文章欢迎转载,但请注明出处:hankchen,http://www.blogjava.net/hank ...
- FastJson bean序列化属性顺序问题
fastjson序列化一个java bean,默认是根据fieldName的字母序进行序列化的,你可以通过ordinal指定字段的顺序,这个特性需要1.1.42以上版本.示例如下. import co ...
- 【转】Unity Scene场景自定义坐标轴
来自:https://blog.csdn.net/cheng624/article/details/70859054 多看看别人的代码是没有坏处的,即使学不了人家的大框架,偶尔拾起一些小东西也是可以的 ...
- Unix高级编程Note2
[Unix Note2] 1.信号屏蔽 2.信号不会排队,即产生同时产生10次,会被合并为1次. 3.sigsuspend,sigsuspend后,进程就挂在那里,等待着开放的信号的唤醒.系统在接收到 ...
- Visual Studio 2013 boost
E:\Visual Studio 2013\install\VC\bin\amd64>E:\IFC\boost_1_56_0_vs2013'E:\IFC\boost_1_56_0_vs2013' ...
- 721. Accounts Merge合并电子邮件账户
[抄题]: Given a list accounts, each element accounts[i] is a list of strings, where the first element ...
- DevExress笔记
最近用DevExpress的WPF图表控件做柱形图看板,总结记录了一些笔记: 1.显示图例: <dxc:ChartControl.Legend> <dxc:Legend /> ...