/**
* 通过字面量方法创建对象
* 所有的属性和方法都挂载在实例上
* 构造器: Object (objPerson.__proto__.constructor)
*/
const objPerson = {
name: "小明",
sex: "男",
age: 10,
sayHello() {
return this.name;
},
};
console.group("字面量方法");
console.log("实例:", objPerson);
console.groupEnd();
/**
* 通过Object.create方法创建对象,实例本身是一个空对象
* 所有的属性和方法都挂载在此实例的__proto__上
* 构造器: Object (oPerson.__proto__.__proto__.constructor)
*/
const oPerson = Object.create({
name: "小明",
sex: "男",
age: 10,
sayHello() {
return this.name;
},
});
console.group("Object.create");
console.log("实例:", oPerson);
console.groupEnd();
/**
* 通过类方法创建对象
* 通过 = 赋值的属性或方法挂载在实例上
* 通过()创建的方法绑定在此类的原型对象上
* 通过重新定义此类的原型对象可更改此类的原型对象
* 构造器: ClsPerson (clsPerson.__proto__.constructor)
*/
class ClsPerson {
// 绑定到实例对象
name = undefined;
// 绑定到实例对象
sex = undefined;
// 绑定到实例对象
sayHello = function () {
console.log(this.name);
};
// 构造器函数
constructor({ name, sex }) {
this.name = name;
this.sex = sex;
}
// 绑定到原型对象
sayName() {
console.log(`Hello, My name is ${this.name}`);
}
}
ClsPerson.prototype.age = 10;
const clsPerson = new ClsPerson({ name: "小明", sex: "男" });
console.group("类方法");
console.log("实例: ", clsPerson);
console.groupEnd();
/**
* 通过构造方法创建对象
* 通过this挂载的属性或者方法会挂载到实例上
* 通过原型挂载的属性或方法会挂载到原型上
*
*/
function FnPerson({ name, sex }) {
// 以下属性都在实例对象
this.name = name;
this.sex = sex;
this.sayHello = function () {
console.log(this.name);
};
}
// 以下属性都在原型对象
FnPerson.prototype.sayName = function () {
console.log(`Hello, My name is ${this.name}`);
};
FnPerson.prototype.age = 10;
const fnPerson = new FnPerson({ name: "小明", sex: "男" });
console.group("构造方法");
console.log("实例:", fnPerson);
console.groupEnd();
/**
* 通过此方法创建的对象和字面量创建对象的大致一样
* 不过只能有属性,不能有方法,不再进行讨论
*/
const jPerson = JSON.parse('{ "name": "小明", "sex": "男", "age": 10 }');
console.group("JSON.parse");
console.log("实例: ", jPerson);
console.groupEnd();
/**
* 总结:
* 无论通过何种方法创建对象
* 此对象都会有实例和__proto__
* 不同的创建方式对于属性或方法绑定的对象不同,要么是实例,要么是原型对象
* 共享权:
* 定义在实例对象的属性或方法此实例独享
* 定义在原型对象上的属性或方法所有实例共享
*/
Javascript创建对象的几种方式对比
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 笔记来自JavaScript高级程序设计的学习笔记。 JavaScript对象的其中创建方式。 一、工厂模式 二、...
- 工厂模式 构造函数模式 原型模式 混合构造函数和原型模式 动态原型模式 寄生构造函数模式 稳妥构造函数模式 推荐:...