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创建对象的对比

字面量的优势:

  1. 它的代码量更少,更易读;
  2. 它可以强调对象就是一个简单的可变的散列表,而不必一定派生自某个类;
  3. 对象字面量运行速度更快,因为它们可以在解析的时候被优化——它们不需要"作用域解析"!因为存在我们创建了一个同名构造函数Object()的可能,所以当我们调用Object()的时候,解析器需要顺着作用域链从当前作用域开始查找,如果在当前作用域找到了名为Object()的函数就执行,如果没找到,就继续顺着作用域链往上找,直到找到全局Object()构造函数为止

构造函数的优势:

  1. Object()构造函数可以接收参数,通过这个参数可以把对象实例的创建过程委托给另一个内置构造函数(Number()、String()等),并返回另一个对象实例。
  2. 使用自定义构造函数创建对象,可以通过传参添加属性和方法,当需要定义的同类对象较多时,节省了定义对象的代码量,并且使对象属性和方法的结构更加清晰
  • 2
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值