Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

❤️❤️❤️Question028 -JavaScript、创建对象的几种方式 #28

Open
wangbinze opened this issue Mar 11, 2021 · 1 comment

Comments

@wangbinze
Copy link
Owner

wangbinze commented Mar 11, 2021

题目:创建对象的几种方式

@wangbinze
Copy link
Owner Author

前面多次提到了使用Object构造函数或者对象字面量可以方便地创建对象,但也存在一些不足,比如创建具有同样接口的多个对象需要重复编写很多代码。

工厂模式

用于抽象创建特定对象的过程。

function createPerson(name, age, job) {
    let o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function () {
        console.log(this.name);
    }
    return o;
}
let person1 = createPerson('wangbinze', 27, 'software engineer')
let person2 = createPerson('pingping', 25, 'software engineer')

这种工程模式虽然可以解决创建多个类似对象的问题,但没有解决对象标识问题(即新创建的对象是什么类型)。

构造函数模式

ECMAScript 中的构造函数是用于创建特定类型对象的。像 Object 和 Array 这样的原生构造函数,运行时可以直接在执行环境中使用。当然也可以自定义构造函数,以函数的形式为自己的对象类型定义属性和方法。

// 函数声明和函数表达式的方法都是可以的
function Person(name, age, job){ 
    this.name = name; 
    this.age = age; 
    this.job = job; 
    this.sayName = function() { 
    console.log(this.name); 
    }; 
} 
// 调用构造函数的实例,应使用new操作符
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg

和原型模型的区别:

  • 没有显示地创建对象。
  • 属性和方法直接赋值给了this。
  • 没有return。

构造函数也是函数

构造函数也是函数,并没有把某个函数定义为构造函数的特殊语法。构造函数与普通函数唯一的区别就是调用方式不同。任何函数只要使用new操作符调用就是构造函数,而不使用new操作符调用的函数就是普通函数。

问题

构造函数定义的方法会在每个实例上都创建一遍。
解放方法:将构造函数中的方法定义在外部,但同时给全局作用上添加了变量。

function Person(name, age, job){ 
    this.name = name; 
    this.age = age; 
    this.job = job; 
    this.sayName = sayName; 
} 
function sayName() { 
    console.log(this.name); 
} 
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg

原型模式

对象迭代

ES2017新增了两个静态方法,用于将对象内容转换为序列化的——更重要的可迭代——格式。都接收一个对象,返回它们内容的数组。

  • Object.values()
    返回对象值的数组。
  • Object.entries()
    返回键/值对的数组。

都是执行对象的浅复制。

const o = {
    qux: {}
}
console.log(Object.values(o) === o.qux); // true
console.log(Object.entries(o)[0][1] === o.qux); // true

其他原型语法

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant