使用Object.create()实现继承 用 Object.create实现类式继承
使用Object.create()实现继承:https://www.cnblogs.com/cuew1987/p/4075027.html
用 Object.create实现类式继承:https://www.jianshu.com/p/561432a109d6
一、常见继承方式
我们日常开发中常见的继承方式主要有: 1、默认模式:
|
1
|
Child.prototype = new Parent(); |
2、借用构造函数:
|
1
2
3
|
function Child(a, b, c, d) { Parent.apply(this, arguments);} |
3、借用和设置原型:
|
1
2
3
4
|
function Child(a, b, c, d) { Parent.apply(this, arguments);}Child.prototype = new Parent(); |
4、共享原型:
|
1
|
Child.prototype = Parent.prototype; |
5、使用临时构造函数:
|
1
2
3
|
var Proxy = function() {};Proxy.prototype = Parent.prototype;Child.prototype = new Proxy(); |
6、extend属性复制:
|
1
2
3
4
5
6
7
8
9
10
11
|
function extend(parent, child) { child = child || {}; for(var key in parent) { if(parent.hasOwnProperty(key)) { child[key] = parent[key]; } } return child;} |
当然在一些javascript库中(jQuery),还存在浅复制和深复制。 7、原型继承模式:
|
1
|
Object.create(Parent); |
二、Object.create实现继承
本文将来学习第七种继承方式Object.create()方法来实现继承,关于此方法的详细描述,请戳这里。下面来通过几个实例来学习该方法的使用:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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: Benjaminconsole.log(child.getName()); |
我们再来看一个例子,再添加一个继承:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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.comconsole.log(SubChild.url);//Outputs: zuojjconsole.log(SubChild.getName());//Outputs: undefinedconsole.log(Child.sex);//Outputs: Benjaminconsole.log(Child.getName()); |
通过上面可以看出Object.create()方法实现了链式继承,及原型链的继承。如果在控制台打印出各个生成的对象,可以很清楚的看到。
|
1
2
3
4
|
//Outputs: trueconsole.log(Child.isPrototypeOf(SubChild));//Outputs: trueconsole.log(Parent.isPrototypeOf(Child)); |
isPrototypeOf() 方法测试一个对象是否存在于另一个对象的原型链上。 以上就是本文对Object.create方法的描述,文中不妥之处,还望批评指正。
使用Object.create()实现继承 用 Object.create实现类式继承的更多相关文章
- js原生设计模式——2面向对象编程之继承—原型继承(类式继承的封装)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 精读JavaScript模式(八),JS类式继承
一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...
- JS原型继承和类式继承
前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...
- JavaScript 类式继承与原型继承
交叉着写Java和Javascript都有2年多了,今天来总结下自己所了解的Javascript类与继承. Javascript本身没有类似Java的面向对象的类与继承术语,但其基于原型对象的思想却可 ...
- JavaScript中的类式继承和原型式继承
最近在看<JavaScript设计模式>这本书,虽然内容比较晦涩,但是细品才发现此书内容的强大.刚看完第四章--继承,来做下笔记. 书中介绍了三种继承方式,类式继承.原型式继承和掺元类继承 ...
- javascript类式继承函数最优版
直接上代码: klass函数 var klass = function (Parent, props) { var Child, F, i; //1.新构造函数 Child = function () ...
- js类式继承模式学习心得
最近在学习<JavaScript模式>,感觉里面的5种继承模式写的很好,值得和大家分享. 类式继承模式#1--原型继承 方法 让子函数的原型来继承父函数实例出来的对象 <script ...
- JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)
继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象 类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...
- js面向对象--类式继承
//待研究//类式继承 //js中模拟类式继承的3个函数 //简单的辅助函数,让你可以将新函数绑定到对象的 prototype 上 Function.prototype.method = functi ...
随机推荐
- jvm——参数解释
https://www.oracle.com/technetwork/java/tuning-139912.html#section4.2.5 https://docs.oracle.com/java ...
- 转 弹性反向传播(RProp)和均方根反向传播(RMSProp)
from http://blog.csdn.net/tsq292978891/article/details/78619384 都是一种权值更新算法,类似于SGD算法,其中,RMSProp是RProp ...
- anaconda历史版本下载
anaconda历史版本安装: anaconda所有版本链接:https://repo.continuum.io/archive/ 清华大学开源软件镜像站:https://mirrors.tuna.t ...
- explicit作用
在C++中,explicit关键字用来修饰类的构造函数,被修饰的构造函数的类,不能发生相应的隐式类型转换,只能以显示的方式进行类型转换. explicit使用注意事项: explicit 关键字只能用 ...
- [SHOI2005]树的双中心
题目链接:Click here Solution: 首先我们要知道,选择两个点\(A,B\),必定存在一条边,割掉这条边,两个集合分别归\(A,B\)管 再结合题目,我们就得到了一个暴力的\(n^2\ ...
- vue 使用 axios 时 post 请求方法传参无法发送至后台
axios 时 post 请求方法传参无法发送至后台报错如下 Response to preflight request doesn't pass access control check: No ' ...
- (66)Nginx+lua+Redis开发
一. 概述 Nginx是一个高性能,支持高并发的,轻量级的web服务器.目前,Apache依然web服务器中的老大,但是在全球前1000大的web服务器中,Nginx的份额为22.4%.Nginx采用 ...
- 白鹭http请求post
示例demo: //new http请求 var request = new egret.HttpRequest(); //请求参数 var params = "p1=postP1& ...
- C# 使用 MsieJavaScriptEngine 引擎运行JavaScript
用这个东西实现了一个js脚本引擎代码生成器,调研的时候这个东西的资料比较少. 我就根据自己的这点应用来讲解讲解,有错误,不符的地方还请园友指出. 使用 Nuget 安装 MsieJavaScriptE ...
- 十、Springboot之thymeleaf与jsp共存
: pom.xml添加依赖 <!--thymeleaf整合JSP需要用到下面的依赖--> <dependency> <groupId>org.thymeleaf&l ...