构造函数和工厂函数

工厂函数和构造函数

先看下面常见的两种代码

// 代码1
function init() {
    obj = new Object()
    obj.initState = function() {
        console.log('------init');
    }
    obj.params = {a: 1}
    return obj
}
var a = new init()

console.log(a, typeof a);
console.log(a.__proto__ === init.prototype);
console.log(a.__proto__ === Object.prototype);
a.initState()
//代码2
function middle() {
    this.obj = new Object()
    this.obj.initState = function() {
        console.log('------middle');
    }
    this.obj.params = {b: 1}
}
var b = new middle

两份代码有什么区别, 先看看输出:

代码1的输出

{params: {…}, initState: ƒ} 'object'
test1.html:26 false
test1.html:27 true
test1.html:15 ------init

代码2的输出

middle {obj: {…}}obj: initState: ƒ ()params: {b: 1}[[Prototype]]: Object[[Prototype]]: Object 'object'
test1.html:47 true
test1.html:48 false
test1.html:49 true
test1.html:40 ------middle

可以看到: 两个函数new出来的实例都创建了一个独立的对象, 区别在与

  1. 直接打印a,b时, 相比于a,b最外层有一个对象包裹,
  2. a的____proto____属性指向的是Object的prototype, 而b的____proto____指向的是middle的prototype

工厂函数

代码1就是所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例”。意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象。

  1. 是一个函数
  2. 用来创建对象
  3. 创建出来的对象具有相同的方法和属性
  4. 创建出来的对象的____proto____属性实际上是指向 Object.prototype

构造函数

代码2就是所谓的构造函数, 一般首字母大写, 函数内部有一个this对象, 进行属性和方法的添加, 一般没有返回语句return, 但是会隐式的返回this, 使用new创建对象, 实例的____proto____属性执行构造函数的prototype, 可以在构造函数的prototype上面添加属性和方法, 作为实例的公共属性和方法, 就是所谓的原型链, 一般用构造函数 + 原型链的方式来实现js里面的class

在使用构造函数 new 一个 对象的时候, new 做了哪些事情 ?

  1. 创建了一个空对象 {}

  2. 连接该对象到另一个对象 this.proto = middle.prototype

  3. this指向该对象

  4. 属性和方法添加到this

  5. 隐式的返回this

posted @ 2022-08-23 11:25  littlelittleship  阅读(98)  评论(0)    收藏  举报