js构造函数的this和prototype区别 / new 的实现

在js构造函数里 this 通过 new 实例生成一个独自的一份数据；prototype 通过new 实例生成一个公用的数据;

function Vue(){
    this.name = 'vue'
}

var vm1 = new Vue();
vm1.name = 'vm1'

var vm2 = new Vue();
vm2.name = 'vm2'

下面输出：

vm1的name 和 vm2的name 是不相同的

function Vue(){
    this.name = 'vue'
}

Vue.prototype.age = '20'

var vm1 = new Vue();

var vm2 = new Vue();

console.log(Vue.protype.age)

console.log(vm1.protype.age)

console.log(vm2.protype.age)

vm1.__proto__.age = 30  

console.log(Vue.protype.age)

console.log(vm1.protype.age)

console.log(vm2.protype.age)

vm1.__proto__.age = 25

console.log(Vue.protype.age)

console.log(vm1.protype.age)

console.log(vm2.protype.age)

下面输出：

vm1的age 和 vm2的age 是公用一个的

 

 

 

js 的new 实例做个啥呢：

1.  创建一个空对象
2. 将创建的空对象原型__proto__ 指向 构造函数的原型 prototype
3. 将构造函数的this指向修改为创建的空对象

function _new(Con,...ages){
　　let obj = {}
　　obj.__proto__ = Con.prototype ; //Object.setPrototypeOf(obj,Con.prototype)
　　Con.apply(obj,ages);
　　return obj

}

function Vue(){
    this.name = 'vue'
}

let vm = _new(Vue);
console.log(vm instanceof  Vue)

结果输出：