二、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. type="radio"样式修改

    input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; ...

  2. WPF 利用RichTextBox 打印出不同颜色的文本

    using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows ...

  3. hibernate简单集合映射和获取

    简单集合映射(可以直接获取) // javabean设计 public class User { private int userId; private String userName; // 一个用 ...

  4. Map之HashMap的get与put流程,及hash冲突解决方式

    在java中HashMap作为一种Map的实现,在程序中我们经常会用到,在此记录下其中get与put的执行过程,以及其hash冲突的解决方式: HashMap在存储数据的时候是key-value的键值 ...

  5. sublim Text3 配置python3环境

    一.安装Sublime Text 3 1.双击下载的.exe文件安装,安装路径不要有中文目录 2.安装Sublime Text 3时,勾选“Add to explorer context menu”, ...

  6. [codeforce 975C] Valhalla Siege (二分)

    Examples input 5 5 1 2 1 2 1 3 10 1 1 1 output 3 5 4 4 3 input 4 4 1 2 3 4 9 1 10 6 output 1 4 4 1 N ...

  7. CentOS 7下搭建高可用集群

    一 .安装集群软件 必须软件pcs,pacemaker,corosync,fence-agents-all,如果需要配置相关服务,也要安装对应的软件. 二.配置防火墙1.禁止防火墙和selinux# ...

  8. maven引入MySQL相关依赖

    <!--mysql驱动包--> <dependency> <groupId>mysql</groupId> <artifactId>mysq ...

  9. nyoj 803 大数问题

    #include<stdio.h> #include<string.h> #define ll long long #define N 110000 int main() { ...

  10. 工具-VS常用快捷键

    项目管理: Ctrl+Shift+N: 新建项目 Ctrl+Shift+O: 打开项目 Ctrl+Shift+S: 全部保存 Shift+Alt+C: 新建类 Ctrl+Shift+A: 新建项 Sh ...