js中Object.create vs new Function() 的区别

时间: 2018-12-23阅读: 2453标签: 对象

前言

之前学习JavaScript 权威指南,说以后在JavaScript建立对象请使用Object.create() 尽量少使用 new Function() .这两个新建对象的方法到底有什么不同呢?


Object.create vs. new Function()

首先我们看一下两个创建对象的方法

// Demo
var Base = function(){};
var a = new Base(); 
var b = Object.create(Base.prototype);

实现方式完全不同,需然都动作都是一样,实现了一个Base对象.但是个中又有不同,我们看一下他们内核是怎样实现的.


new Object()  

// new Function() 理解缩略版
var o1 = new Object();
o1.__proto__ = Base.prototype; 
Base.call(o1);

or

// new 详细内核
function objectFactory() {
    var args = Array.prototype.slice.call(arguments) // 使用objectFactory的时候,把arguments,转化为数组
    var constructor = args.shift() //提取第1个构建对象
    var instance = Object.create(constructor.prototype) // 创建constructor实例 instance ,等同于上面的 new Object() 和 o1.__proto = Base.prototype
    var temp = Constructor.apply(instance, args)  // 使用apply函数运行args, 把 instance 绑定到 this ,等同于上面的Base.call(o1)
    return (typeof temp === 'object' && temp !== null) ? temp : instance  //返回对象判断 是object 还是 null 还是实例
}

new 方式实现方式,实际上是先新建了一个Object对象,再用这个对象继承至Base,最后再绑定this.
实现原理: 新建一个Object,再通过proto绑定,继承prototype.


Object.create(proto[, propertiesObject])  

// Object.create
Object.create = function(o){
    var F = function(){}; // 隐式构造函数
    F.prototype = o;
    return new F(); // 返回一个new
}

Object.create实现方式,实际上是先新建一个constructer Function, 再用 prototype 继承至 o.prototype 来实现继承,和new实现继承的方法不一样。最后new一个对象,这里要注册create没有绑定this,同时没有调用到Base 的construcer.

实现原理: 新建一个隐式函数,再通过prototype 绑定.

我们来看一个实际的例子:

function Foo(){
    console.log("foo function");
}

var a = new Foo(); // foo function
// a 创建的时候 会自动执行构造函数 

var b = Object.create(Foo.prototype);
// b 创建的时候不会执行构造函数,因为已经隐藏了.

我们再看一个例子:

function Foo(a){
    this.name = a;
    // var color = 'red';
}

Foo.prototype.getName = function(){
    console.log(this.name);
}

var a = new Foo('BBC');

var b = Object.create(Foo.prototype);

console.log(a.name);// BBC
console.log(b.name);// undefined 

console.log(a.getName()); // BBC
console.log(b.getName()); // undefined

上例子可以看出因为Object.create 没有this ,访问不到name,那应该怎样正常创建Object.creat.看下面例子:

function Foo(a){
    this.name = a;
}
Foo.prototype.getName = function(){
    console.log(this.name);
}
var a = new Foo('BBC');
var b = Object.create(Foo.prototype,{
    'name': { // name变量
        value: 'BBC',
        enumerable: true
    },
})

console.log(a.name); // BBC
console.log(b.name); // BBC

所以new 和 Object.create 绝不相同.使用的时候要多加注意.


使用场景

他们两的使用场景在那里呢?

new: 生成实例对象的常用方法,就是使用new命令,让构造函数返回一个实例.

Object.create : 但是很多时候,只能拿到一个实例对象,它可能根本不是由构建函数生成的,那么能不能从一个实例对象,生成另一个实例对象呢?JavaScript 提供了Object.create方法,用来满足这种需求。

// 原型对象
var A = {
  print: function () {
    console.log('hello');
  },
  name: 'color',
};

// 实例对象
var B = Object.create(A);
B.print() // hello
B.print === A.print // true
B.name = 'shape';
A.name // color

上面代码中,Object.create方法以A对象为原型,生成了B对象。B继承了A的所有属性和方法。这段代码等同于下面的代码。

var A = function () {};
A.prototype = {
 print: function () {
   console.log('hello');
 }
};

var B = new A();
B.print === A.prototype.print // true

下面三种方式生成的新对象是等价的。

var obj1 = Object.create({});
var obj2 = Object.create(Object.prototype);
var obj3 = new Object();


参考

你不知道的javascript之Object.create 和new区别

Object.create() and new SomeFunction()

new Object()和Object.create()两者有何异同?

JavaScript inheritance: Object.create vs new

本文作者: ClarenceChen
本文标题: JavaScript Object.create vs new Function() 的区别
本文链接: https://clarencec.github.io/2017/10/14/Object-create-and-new-JavaScript/



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1681

javascript的navigator对象及属性userAgent

js test()方法用于检测一个字符串是否匹配某个模式.如果字符串中有匹配的值返回 true ,否则返回 false

Javascript的对象拷贝

Javascript中对象拷贝的多种方式,以及探究一下深拷贝和浅拷贝。在开始之前,我先提一下一些基础知识:Javascript 的对象只是指向内存中某个位置的指针。这些指针是可变的,也就是说,它们可以重新被赋值。因此,单单复制这个指针的结果是,有两个指针指向内存中的同一块地址。

原生js实例对象方法_Array、String、Data

toString() // 把数组转换为字符串,使用逗号分隔,valueOf() // 返回数组对象本身。ary.push() // 该方法有一个返回值,表示数组最新的长度,该方法中可以设置多个参数,aary.pop() //返回数组中最后一个字,且会修改数组的长度

Js ES6 Promiss对象

Node.js中,以异步(Async)回调著称,使用了异步,提高了程序的执行效率,但是,代码可读性较差的。假如有几个异步操作,后一个操作需要前一个操作的执行完毕之后返回的数据才能执行下去,如果使用Node.js,就需要一层层嵌套下去

js中new的本质

用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步: 第一步是建立一个新对象; 第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象; 第三步就是将该对象作为this参数调用构造函数,完成成员设置等初始化工作。

如何在 JavaScript 中使用对象的方法

JavaScript 中,对象是 键/值 对的集合。值可以包含属性和方法,并且可以包含所有其他 JavaScript 数据类型,例如字符串,数字和布尔值。JavaScript中的所有对象都来自父 Object 的构造函数。

history对象详解及单页面路由实现

history对象保存着用户的上网记录,从浏览器窗口打开的那一刻算起。出于安全的考虑,开发人员无法得知用户浏览过的URL。不过,借由用户访问过的页面列表,同样可以在不知道实际URL的情况下实现后退与前进

javascript如何判断对象是否相等?

JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕。下面我们就来看一下如何判断对象是否相等。

javascript中内置对象和浏览器对象的区别是什么?

JavaScript对象是包含相关属性和方法的集合体。在 JavaScript 中,对象是数据(变量),拥有属性和方法。在javascript中对象通常包括两种类型:内置对象和浏览器对象,此外,用户还可以自定义对象。

jquery对象与dom对象的区别?

用到了jquery与dom对象的地方比较多,写在这里加强下基本概念:判断是否存在时候,要用dom对象,因为jQuery在获得对象的时候,无论要获得的对象是否存在,都会返回jQuery对象

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!