JavaScript的几种创建对象的方式
function createPerson(name, age) {
// 显示创建对象
const obj = new Object();
// 直接给对象进行赋值
obj.name = name;
obj.age = age;
obj.sayName = function() {
console.log(obj.name);
}
// 最后 return 该对象
return obj;
}
const person1 = createPerson('litterstar', 18);
console.log(person1);
解决创建多个相似对象的问题
function Person(name, age) {
// 和工厂模式区别
// ① 没有显式创建对象
// ② 直接将属性和方法赋给了this对象
// ③ 没有return 语句
this.name = name;
this.age = age;
this.sayName = function() {
console.log(obj.name);
}
}
const person1 = new Person('litterstar', 18);
console.log(person1);
function Person() {}
Person.prototype.name = 'litterstar';
Person.prototype.age = 18;
Person.prototype.sayName = function () {
console.log(this.name);
}
const person1 = new Person();
方法不会被重复创建
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function () {
console.log(this.name);
}
const person1 = new Person('littlerstar', 18);
console.log(person1);
function Person(name, age) {
// 属性
this.name = name;
this.age = age;
// 方法
// 只有 sayName() 方法不存在的情况下,才会将它添加到原型中
if(typeof this.sayName !== 'function') {
Person.prototype.sayName = function () {
console.log(this.name);
}
}
}
const person1 = new Person('littlerstar', 18);
console.log(person1.constructor); // [Function: Person]
把所有信息封装在构造函数中。
function Person(name, age) {
// 显式创建对象
const obj = new Object();
// 直接给对象进行赋值
obj.name = name;
obj.age = age;
obj.sayName = function() {
console.log(obj.name);
}
// 最后 return 该对象
return obj;
}
const person1 = new Person('litterstar', 18);
console.log(person1.constructor); // [Function: Object]
除了使用 new 操作符并把 使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。
function Person(name, age) {
// 显式创建对象
const obj = new Object();
// 直接给对象进行赋值
obj.name = name;
obj.age = age;
obj.sayName = function() {
console.log(obj.name);
}
// 最后 return 该对象
return obj;
}
// 变量 person1中保存的是一个稳妥对象,除了调用 sayName()方法外,没有别的方法访问其数据成员
const person1 = Person('litterstar', 18);
console.log(person1.constructor); // [Function: Object]
稳妥构造函数模式和寄生构造函数模式有一下两点不同
[1]JavaScript 创建对象的 7 种方法: https://juejin.im/entry/58291447128fe1005cd41c52
[2]JavaScript深入之创建对象的多种方式以及优缺点: https://github.com/mqyqingfeng/Blog/issues/15