OO in JS（1）

JavaScript

 2017/12/17 

创建对象

工厂模式

// 按照我的理解此时生成了一个prototype，constructor为Person1
function Person1(name) {
  let o = new Object() // 等价于let o = {}，注意new的是Object
  o.name = name
  o.sayName = function () {}
  return o
}
let person1 = Person1('Orion')
Person1.prototype // __proto__为Obejct的只有constructor的对象，代表该构造函数对应的prototype
person1.__proto__ // Object，代表该实例的原型对象
person1 instanceof Person1 // false，是Object
person1.constructor === Person1 // false，是Object

构造函数 constructor

function Person2 (name) {
  this.name = name
  this.sayName = function () {}
}
var person2 = new Person2('Orion') // 相当于创建一个Person2.prototype对象，只有constructor才可以使用new，比如不可以new person2()
Person2.prototype // __proto__为Obejct的只有constructor的对象
person2.__proto__ // 同上
person2 instanceof Person2 // true
person2.constructor === Person2 // true

原型模式

// 构造函数
function Person3 () {}
Person3.prototype.name = 'Orion'
Person3.prototype.sayName = function () {}
let person3 = new Person3() // 不带()也可以，new Person
Person3.prototype // __proto__为Obejct的有constructor、name和sayName的对象
person3.__proto__ // 同上
person3 instanceof Person3 // true
person3.constructor === Person3 // true

对象字面量封装

// constructor是在这一步被添加到prototype中去的
function Person4 () {}
// 这里把原来prototype替换掉了，于是constructor也没了
Person4.prototype = {
  name: 'Orion',
  sayName: function () {}
}
let person4 = new Person4()
Person4.prototype // __proto__为Obejct的只有name和sayName的对象
person4.__proto__ // 同上
person4 instanceof Person4 // true
person4.constructor === Person4 // false

原文作者：Yizhou Shen

原文链接：http://shenyizhou.github.io/2017/12/17/2017-12-17-OO%20in%20JS%EF%BC%881%EF%BC%89/

发表日期：December 17th 2017, 3:04:44 pm

更新日期：September 6th 2023, 3:04:23 pm

Next Post

前端字体
Previous Post

WebStorm文件模板

CATALOG

1. 创建对象