Web 前端开发 技术干货让前端飞

通过对象字面量和构造函数创建对象的区别:

2017-02-20  本文已影响0人  var_Change

通过对象字面量方式创建对象:

我们可以直接在创建对象的时候添加功能

var person = {
    name : 'zqq',
    age : 28,
    say : function(){
        return "hello";
    }
};

或者

首先定义一个"空对象",然后添加属性和方法

var person = {};
person.name = 'zqq';
person.age = 28;
person.say = function(){
    return "hello";
}

上面的"空对象"为什么打了双引号?这只是一种简称而已。在js中根本不存在真正的空对象,理解这一点至关重要!即使时最简单的{}对象也会包含从Object.prototype继承而来的属性和方法。我们提到的"空对象"只是说这个对象没有自有属性,不考虑它是否有继承而来的属性

通过构造函数创建对象

var person =  new Object();//没传参数的话,()可以省略
person.name = 'zqq';
person.age = 28;

对象字面量vs构造函数创建对象对比

字面量的优势:

  1. 它的代码量更少,更易读;

  2. 它可以强调对象就是一个简单的可变的散列表,而不必一定派生自某个类;

  3. 对象字面量运行速度更快,因为它们可以在解析的时候被优化:它们不需要<a href="http://www.csdn.net/article/2011-09-07/304152">"作用域解析(scope resolution)"</a>;因为存在我们创建了一个同名的构造函数Object()的可能,当我们调用Object()的时候,解析器需要顺着作用域链从当前作用域开始查找,如果在当前作用域找到了名为Object()的函数就执行,如果没找到,就继续顺着作用域链往上照,直到找到全局Object()构造函数为止

  4. Object()构造函数可以接收参数,通过这个参数可以把对象实例的创建过程委托给另一个内置构造函数,并返回另外一个对象实例,而这往往不是你想要的。

下面的示例代码中展示了给new Object()传入不同的参数(数字、字符串和布尔值),最终得到的对象是由不同的构造函数生成的:

// 空对象
var o = new Object();
console.log(o.constructor === Object); // true

// 数值对象
var o = new Object(1);
console.log(o.constructor === Number); // true
console.log(o.toFixed(2)); // "1.00"

// 字符串对象
var o = new Object("I am a string");
console.log(o.constructor === String); // true
// 普通对象没有substring()方法,但字符串对象有
console.log(typeof o.substring); // "function"

// 布尔值对象
var o = new Object(true);
console.log(o.constructor === Boolean); // true

Object()构造函数的这种特性会导致一些意想不到的结果,特别是当参数不确定的时候

综上所述:尽量用对象字面量的方式来创建对象

参考资料:
https://github.com/TooBug/javascript.patterns/blob/master/chapter3.markdown

http://lichking1201.github.io/2014/10/11/js-patterns-1.html

上一篇 下一篇

猜你喜欢

热点阅读