2019獨角獸企業(yè)重金招聘Python工程師標準>>>

0 一般函數(shù)調(diào)用

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 創(chuàng)建對象

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觸發(fā)的函數(shù)一般稱為“構造函數(shù)”，大寫字母開頭，生成的對象包含“構造函數(shù)”名+返回的對象

其實使用new觸發(fā)函數(shù)，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 創(chuàng)建一個空對象，將它綁定給this

2 將對象的_proto_屬性設置為構造函數(shù)的原型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 創(chuàng)建非構造函數(shù)

使用new 創(chuàng)建開頭的普通函數(shù)，會發(fā)生什么？

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 }

結(jié)果和普通函數(shù)調(diào)用是一樣的，我們看看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 設置對象的構造函數(shù)和_proto_屬性

3 設置返回邏輯

4 如果沒有返回的話，添加return在代碼的最后

?

其實這些操作并沒有影響之前的代碼，因為之前的代碼并沒有用到this, 而且也有返回對象

小結(jié)：使用new 對象時，構造函數(shù)里必須使用this才有價值

?

參考資料：

https://www.educative.io/collection/page/5679346740101120/5707702298738688/5750085036015616

轉(zhuǎn)載于:https://my.oschina.net/u/2510955/blog/1581436

總結(jié)

以上是生活随笔為你收集整理的Javascript 面向对象编程中的‘new’的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。