一個(gè)實(shí)例看懂JS四種創(chuàng)建對(duì)象方式的區(qū)別
標(biāo)簽:
JavaScript
1. 概述
JS中常用的创建对象方式有四种:
- 对象字面量
- new Object()
- 构造函数
- Object.create()
这四种方式虽然都能创建对象,但是还是有区别的,接下来我们研究下。
2. 功能相同
先来看一个实例,我们使用4种方式创建4个对象。
// 对象字面量
var dog1 = {
name: '大黄',
age: 2,
speak: function () {
console.log("汪汪");
}
}
// 使用Object
var dog2 = new Object();
dog2.name = "大黄";
dog2.age = 2;
dog2.speak = function () {
console.log("汪汪");
}
// 使用构造函数
function Dog(name, age) {
this.name = name;
this.age = age;
}
Dog.prototype.speak = function () {
console.log("汪汪");
};
var dog3 = new Dog("大黄", 2);
// 使用Object.create
var dog4 = Object.create(dog1);
这4个对象都是有name、age两个属性和speak一个方法,我们来测试下:
console.log(dog1.name + dog1.age);
dog1.speak();
console.log(dog2.name + dog2.age);
dog2.speak();
console.log(dog3.name + dog3.age);
dog3.speak();
console.log(dog4.name + dog4.age);
dog4.speak();
执行结果如下,可见他们的功能是一样的。
3. 结构不同
虽然使用起来功能一样,但是实际这4个对象的结构并不是一样的,我们继续执行以下代码:
console.log(dog1);
console.log(dog2);
console.log(dog3);
console.log(dog4);
执行结果如下:
可见,对象字面量和new Object方式创建的对象结构是一样的。
使用构造函数创建的对象,speak方法是在其原型上的。
而使用Object.create创建的对象,原对象的属性和方法都会挂到新对象的原型上。
4. 小结
使用没区别,结构有区别,还是要加以区分的。
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦