从另一个角度思考JS中的new

最近看下了方方大佬在知乎上一篇将new的文章很有启发，没有从面向对象的角度去思考，但却有着更底层的思考，我给自己总结记录一下。

1、那个经典的例子开始说起

首先我们创建一个包含人类对象，它包含一些属性和方法

// person 对象
var person = {
  name: 'join',
  age: 12,
  say: function(){
    console.log('say')
  },
  jump: function(){
    console.log('jump')
  }
}

2、现在我们需要一百个这样的person对象

下面用最笨的一个方法来实现以下

var  persons = []
var  person

for(var i=0; i<100; i++){
  person = {
    name: 'join',
    age: 12,
    say: function(){
      console.log('say')
    },
    jump: function(){
      console.log('jump')
    }
  }
  persons.push(pseron)
}

这样写看着很傻是吧，如果你对原型链有一个了解的话，那么这些方法可以用挂在原型链上，来解决重新创建的问题,来看一下改进版本。

var  persons = []
var  personShare = {
  say: function(){
    console.log('say')
  },
  jump: function(){
    console.log('jump')
  }
}

for(var i=0; i<100; i++){
  person = {
    // 每个人的name和age都是不一样的，所以写在这里了
    name: 'join',
    age: 12,
  }
  person.__proto__ = personShare
  // __proto__是一个隐藏属性，平时并不建议这么使用
  // person.__proto__.say = person.say = personShare.say
  // person.__proto__.jump = person.jump = personShare.jump
  
   persons.push(pseron)
}

3、优雅的改进一下

然后这边可以发现的是不是将person分成两部分写起来不太优雅，接下来在进行一点优雅版本的改进,用一个函数将两部分合起来

person.prototype = {
  say: function(){
    console.log('say')
  },
  jump: function(){
    console.log('jump')
  }
}

function person(name, age) {
  //先来创建一个临时对象
  var temp = {}

  // 加上属性
  temp.name = name
  temp.age = age

  //加上方法
  temp.__proto__ =  person.prototype

  return temp
}

// 这样看起来起来是不是就很简洁了
var persons = []
var name = ['a','b','c', ...]
var age = [1,2,3, ...]
for(var i=0; i<100; i++){
  persons.push(person(name[i], age[i]))
}

4、new 出来啦！！！

上面有这样一句代码

persons.push(person(name, age))

这里我们可以把person(name, age) 当作new Person(name ,age)来看的话，在出来理解下是不是感觉出其的相似，就是这样的,站在这个视角上，new 帮我们做了这几个事情

• 不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
• 不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；
• 不用 return 临时对象，因为 new 会帮你做；
• 不要给原型想名字了，因为 new 指定名字为 prototype。

我们这一次用new来写

function Person(name, age){
  this.age = age
  this.name = name
}
Person.prototype = {
  say: function(){
    console.log('say')
  },
  jump: function(){
    console.log('jump')
  }
}

var persons = []
for(var i=0; i<100; i++){
  persons.push(new Person(name, age))
}

我们可以从3中的代码看到4中代码，发现其实new本质上是JS之父发明给我们的语法糖，帮我们少些一些代码(一般new都是和构造函数在一起的，后面的函数一般用首字母大写用来区分和其他的普通函数的区别)

5、 constructor属性

new 操作为了记录「临时对象是由哪个函数创建的」，会预先在person.prototype加一个constructor 属性，

person.prototype = {
  constructor: person
}

如果我们从新对person.prototype赋值就会覆盖掉constructor这个属性，所以我们应该这样写

person.prototype.say = function(){
  console.log('say')
}
person.prototype.jump = function(){
  console.log('jump')
}

哇，感觉自己现在对new的理解更透彻了，开心，耶

参考链接: https://zhuanlan.zhihu.com/p/23987456