二、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方法的描述,文中不妥之处,还望批评指正。
 

//来自:http://www.2cto.com/kf/201411/349571.html

使用 Object.create实现js 继承的更多相关文章

  1. [Javascript] Prototype 2 Object.create()

    function Fencepost (x, y, postNum){ this.x = x; this.y = y; this.postNum = postNum; this.connections ...

  2. Object.create用法

    用法: Object.create(object, [,propertiesObject]) 创建一个新对象,继承object的属性,可添加propertiesObject添加属性,并对属性作出详细解 ...

  3. js继承之Object.create()

    通过 Object.create() 方法,使用一个指定的原型对象和一个额外的属性对象创建一个新对象.这是一个用于对象创建.继承和重用的强大的新接口.说直白点,就是一个新的对象可以继承一个对象的属性, ...

  4. js 继承,Object.setPrototypeOf | Object.getPrototypeOf | Object.create class

    https://juejin.im/post/5cfd9d30f265da1b94213d28#heading-14 https://juejin.im/post/5d124a12f265da1b91 ...

  5. [JS] Topic - Object.create vs new

    故事背景 Ref: 你不知道的javascript之Object.create 和new区别 var Base = function () {} (1) var o1 = new Base(); (2 ...

  6. js Object.create 初探

    1.作用 Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__. https://developer.mozilla.org/zh-CN/docs/W ...

  7. js中的new操作符与Object.create()的作用与区别

    js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...

  8. 使用Object.create 克隆对象以及实现单继承

    var Plane = function () { this.blood = 100; this.attack = 1; this.defense = 1; }; var plane = new Pl ...

  9. 【前端】js中new和Object.create()的区别

    js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...

随机推荐

  1. Robot Framework(二)测试数据语法

    2.1.1文件和目录 测试数据的层次结构安排如下: 测试数据在测试数据文件中创建. 测试数据文件会自动创建一个包含该文件中的测试数据的测试套件. 包含测试数据文件的目录构成了更高级别的测试套件.这样的 ...

  2. Python基础:dict & set

    一 :dict 1:Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. eg: dict查找 ...

  3. 转载:html特殊字符 编码css3 content:"我是特殊符号"

    项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ width: 20px; he ...

  4. 洛谷P3628 [APIO2010]特别行动队 斜率优化

    裸题,注意队列下标不要写错 Code: #include<cstdio> #include<algorithm> #include<cmath> using nam ...

  5. Flex教程

    详细教程: 1.基础知识:一劳永逸的搞定 flex 布局 2.阮一峰的flex教程:flex syntax   flex example

  6. Statement对象sql注入漏洞的问题

    现在通过mysql以及oracle来测试sql注入  漏洞 mysql中的注释#    oracle中的注释为-- 所以注入漏洞就产生了 //登录测试 public void login()throw ...

  7. Elasticsearch Sliced Scroll分页检索案例分享

    面试:你懂什么是分布式系统吗?Redis分布式锁都不会?>>>   The best elasticsearch highlevel java rest api-----bboss ...

  8. Ajax json jquery实现菜单案例

    需求: 运用AJAX请求文件menu.json,配置菜单栏,并实现以下功能点: 1. 点击向左箭头,菜单向左移动,隐藏 2. 点击向右箭头,菜单向右移动,显示3. 点击一级菜单,被点击菜单的子菜单显示 ...

  9. net--技术栈(大图)

  10. Ubuntu16.04编译cmake源码

    编译版本:cmake-3.8.0-rc2 为了能够编译出ccmake和cmake-gui,首先需要安装libncurses5-dev sudo apt install libncurses5-dev ...