0 一般函数调用
function personFn(name, age) {
var personObj = {};
personObj.name = name;
personObj.age = age;
return personObj;
}
var alex = personFn('Alex', 30);
console.log(alex); // -> { name: 'Alex', age: 30 }
1 使用new 创建对象
function PersonConstructor(name, age) {
this.name = name;
this.age = age;
}
var alex = new PersonConstructor('Alex', 30);
console.log(alex); // -> PersonConstructor { name: 'Alex', age: 30 }
使用new触发的函数一般称为“构造函数”,大写字母开头,生成的对象包含“构造函数”名+返回的对象
其实使用new触发函数,Javascript engine会特殊处理,下面注释的伪码可以看成Javscript engine加入的特殊处理
function PersonConstructor(name, age) {
// this = {};
// this.__proto__ = PersonConstructor.prototype;
// Set up logic such that: if
// there is a return statement
// in the function body that
// returns anything EXCEPT an
// object, array, or function:
// return 'this' (the newly
// constructed object)
// instead of that item at
// the return statement;
this.name = name;
this.age = age;
// return this;
}
整段代码可以分解为下面几个部分:
1 创建一个空对象,将它绑定给this
2 将对象的_proto_属性设置为构造函数的原型prototype
3 返回逻辑:如果代码没有返回,或者返回的不是object, array, 或者 function中的一种,那么将返回this
4 在代码末尾添加return, 如果代码中没有return
例子
function Demo() {
console.log(this);
this.value = 5;
return 10;
}
/*1*/ var demo = new Demo(); // -> Demo {}
/*2*/ console.log(demo.__proto__ === Demo.prototype); // -> true
/*3*/ console.log(demo); // -> Demo { value: 5 }
function SecondDemo() {
this.val = '2nd demo';
}
/*4*/ console.log(new SecondDemo()); // -> SecondDemo { val: '2nd demo' }
2 使用new 创建非构造函数
使用new 创建开头的普通函数,会发生什么?
function personFn(name, age) {
var personObj = {};
personObj.name = name;
personObj.age = age;
return personObj;
}
var alex = new personFn('Alex', 30);
console.log(alex); // -> { name: 'Alex', age: 30 }
结果和普通函数调用是一样的,我们看看Javascript engine 加入代码后的样子
function personFn(name, age) {
// this = {};
// this.constructor = PersonConstructor;
// this.__proto__ = PersonConstructor.prototype;
// Set up logic such that: if
// there is a return statement
// in the function body that
// returns anything EXCEPT an
// object, array, or function:
// return this (the newly
// constructed object)
// instead of that item at
// the return statement;
var personObj = {};
personObj.name = name;
personObj.age = age;
return personObj;
// return this;
}
注释掉的代码主要做了下面四件事:
1 生成空对象,this绑定到这个空对象上
2 设置对象的构造函数和_proto_属性
3 设置返回逻辑
4 如果没有返回的话,添加return在代码的最后
其实这些操作并没有影响之前的代码,因为之前的代码并没有用到this, 而且也有返回对象
小结:使用new 对象时,构造函数里必须使用this才有价值
参考资料:
https://www.educative.io/collection/page/5679346740101120/5707702298738688/5750085036015616