JS 通过对象字面量{}和构造函数new创建对象的区别
通过对象字面量方式{}创建对象
可以直接在创建对象的时候添加属性和方法
let person = {
name : 'ning',
age : 19,
say : function(){
return "hello world!";
}
};
console.log(person.say()); //hello world!
也可以先定义一个"空对象",然后添加属性和方法
let person = {};
person.name = 'ning';
person.age = 19;
person.say = function(){
return "hello world!";
}
console.log(person.say()); //hello world!
注意:在js中根本不存在真正的空对象!即使是最简单的{}对象也会包含从Object.prototype继承而来的属性和方法(toString()、valueOf()等),所谓的"空对象"只是说这个对象没有自有属性,不考虑它是否有从原型链上继承而来的属性
通过构造函数new创建对象
只能先定义一个"空对象",然后添加属性和方法
let person = new Object();//没传参数的话,()可以省略
person.name = 'ning';
person.age = 19;
person.say = function(){
return "hello world!";
}
console.log(person.say()); //hello world!
当有参数传入构造函数的时候,"空对象"继承的属性和方法也会随之改变
// 空对象
let o = new Object();
console.log(o.constructor === Object); // true
// 数值对象
let o = new Object(1);
console.log(o.constructor === Number); // true
// 普通对象没有toFixed()方法,但数值对象有
console.log(o.toFixed(2)); // "1.00"
// 字符串对象
let o = new Object("1");
console.log(o.constructor === String); // true
// 普通对象没有substring()方法,但字符串对象有
console.log(o.substring(0)); // "1"
// 布尔值对象
let o = new Object(true);
console.log(o.constructor === Boolean); // true
// Symbol对象
let o = new Object(Symbol(1));
console.log(o.constructor === Symbol); // true
注意:如果使用自定义构造函数new创建对象,可以直接添加属性和方法!
function Obj1(name,age,say){
this.name=name;
this.age=age;
this.say=function(){
return say;
}
}
let person=new Obj1('ning',19,'hello world!');
console.log(person.say()); //hello world!
{}和new创建对象的对比
字面量的优势:
- 它的代码量更少,更易读;
- 它可以强调对象就是一个简单的可变的散列表,而不必一定派生自某个类;
- 对象字面量运行速度更快,因为它们可以在解析的时候被优化——它们不需要"作用域解析"!因为存在我们创建了一个同名构造函数Object()的可能,所以当我们调用Object()的时候,解析器需要顺着作用域链从当前作用域开始查找,如果在当前作用域找到了名为Object()的函数就执行,如果没找到,就继续顺着作用域链往上找,直到找到全局Object()构造函数为止
构造函数的优势:
- Object()构造函数可以接收参数,通过这个参数可以把对象实例的创建过程委托给另一个内置构造函数(Number()、String()等),并返回另一个对象实例。
- 使用自定义构造函数创建对象,可以通过传参添加属性和方法,当需要定义的同类对象较多时,节省了定义对象的代码量,并且使对象属性和方法的结构更加清晰