建站
咨詢
售后
建站咨詢
新聞中心
18.1 基礎
new的作用是通過構(gòu)造函數(shù)來創(chuàng)建一個實例對象，該實例與原型和構(gòu)造函數(shù)之間的關(guān)系如下圖所示：
創(chuàng)新互聯(lián)公司成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點，以客戶需求中心、市場為導向”的快速反應體系。對公司的主營項目，如中高端企業(yè)網(wǎng)站企劃 / 設計、行業(yè) / 企業(yè)門戶設計推廣、行業(yè)門戶平臺運營、重慶APP軟件開發(fā)、成都做手機網(wǎng)站、微信網(wǎng)站制作、軟件開發(fā)、西部信息服務器租用等實行標準化操作，讓客戶可以直觀的預知到從創(chuàng)新互聯(lián)公司可以獲得的服務效果。
18.2 new過程中發(fā)生了什么
當一個構(gòu)造函數(shù)new的過程到底發(fā)生了什么?簡要概述主要分為以下幾個步驟：
- 一個新對象被創(chuàng)建;
- 該對象的__ proto __屬性指向該構(gòu)造函數(shù)的原型，即Fn.prototype;
- 將執(zhí)行上下文(this)綁定到新創(chuàng)建的對象中;
- 如果構(gòu)造函數(shù)有返回值(對象或函數(shù))，那么這個返回值將取代第一步中新創(chuàng)建的對象。
new真的做了這幾步嗎?秉承著“實踐是檢驗真理的唯一標準”的原則，下面將這幾個關(guān)鍵點進行逐一驗證。
- function Fun() {
- this.a = 10;
- this.b = 20;
- this.method1 = () => {
- return this.a + this.b;
- }
- this.method2 = () => {
- return this;
- }
- }
- Fun.prototype = {
- method2: () => {
- console.log('原型上的method1被訪問');
- }
- }
18.2.1 驗證點1——新對象被創(chuàng)建
驗證點1是新對象被創(chuàng)建，其實這個里面有兩層含義：
new之后返回的內(nèi)容是一個對象
- const fun = new Fun();
- console.log(fun); // { a: 10, b: 20, method1: [Function] }
- console.log(typeof(fun)); // object
通過打印其內(nèi)容，并通過typeof進行驗證，其返回內(nèi)容確實是一個對象。
每次返回的都是一個新創(chuàng)建的對象
- const fun1 = new Fun();
- const fun2 = new Fun();
- console.log(fun1 === fun2); // false
通過創(chuàng)建兩個實例，通過判斷兩個實例不相等，則證明確實每次返回的是一個新的對象。
18.2.2 驗證點2——該對象可訪問原型上的屬性和方法
驗證點2是新創(chuàng)建的實例可訪問原型上的屬性和方法，驗證該關(guān)鍵點只需要訪問原型上的方法即可實現(xiàn)，若原型上的方法能夠被正常訪問，則表示該驗證點通過，負責不通過。
- const fun3 = new Fun();
- fun3.method3(); // 原型上的method3被訪問
通過驗證，原型上的方法確實能夠被訪問。
18.2.3 驗證點3——this指向
驗證this指向只需要將this指向打印出來即可。
- const fun4 = new Fun();
- console.log(fun4.method2()); // { a: 10, b: 20, method1: [Function], method2: [Function] }
- console.log(fun4.method2() === fun4); // true
18.2.4 驗證點4——構(gòu)造函數(shù)有返回值的處理邏輯
一個函數(shù)的返回值可以有多種，例如：string、boolean、number、Object、function等，下面我們驗證一些內(nèi)容，看構(gòu)造函數(shù)有不同的返回值，其實例為何值。
返回值為string
- function Fun() {
- this.a = 10;
- this.b = 20;
- return 'test';
- }
- Fun.prototype = {
- method: () => {
- console.log('原型上的method被訪問');
- }
- }
- const fun = new Fun();
- console.log(fun); // { a: 10, b: 20 }
觀察其最終結(jié)果，字符串沒有沒正常返回，返回值是一個新的實例。
返回值為Object
- function Fun() {
- this.a = 10;
- this.b = 20;
- return {
- c: 30
- };
- }
- Fun.prototype = {
- method: () => {
- console.log('原型上的method被訪問');
- }
- }
- const fun = new Fun();
- console.log(fun); // { c: 30 }
觀察其結(jié)果，返回值是函數(shù)中返回的對象，則表征當構(gòu)造函數(shù)返回值為對象時，會返回其對象，不返回實例化后的內(nèi)容。
返回值為function
- function Fun() {
- this.a = 10;
- this.b = 20;
- return function() {
- this.d = 40;
- };
- }
- Fun.prototype = {
- method: () => {
- console.log('原型上的method被訪問');
- }
- }
- const fun = new Fun();
- console.log(fun); // [Function]
返回函數(shù)的效果和返回對象的效果一致。
通過不斷嘗試總結(jié)，可以得出以下結(jié)論：
構(gòu)造函數(shù)的返回值為基本類型，其返回值是實例化后的對象，不受返回值的影響;
構(gòu)造函數(shù)的返回值是引用類型，其返回值即為new之后的返回值。
18.3 實現(xiàn)一個new
介紹了這么多，已經(jīng)理解了new時發(fā)生的事情并經(jīng)過了驗證，下面就手動實現(xiàn)一個自己的new函數(shù)。
- function myNew(Fn, ...args) {
- // 一個新的對象被創(chuàng)建
- const result = {};
- // 該對象的__proto__屬性指向該構(gòu)造函數(shù)的原型
- if (Fn.prototype !== null) {
- Object.setPrototypeOf(result, Fn.prototype);
- }
- // 將執(zhí)行上下文（this）綁定到新創(chuàng)建的對象中
- const returnResult = Fn.apply(result, args);
- // 如果構(gòu)造函數(shù)有返回值（對象或函數(shù)），那么這個返回值將取代第一步中新創(chuàng)建的對象。
- if ((typeof returnResult === 'object' || typeof returnResult === 'function') && returnResult !== null) {
- return returnResult;
- }
- return result;
- }
小試牛刀
- function Fun() {
- this.a = 10;
- this.b = 20;
- }
- Fun.prototype = {
- method: () => {
- console.log('原型上的method被訪問');
- }
- }
- const fun1 = new Fun();
- console.log(fun1); // { a: 10, b: 20 }
- const fun2 = myNew(Fun);
- console.log(fun2); // { a: 10, b: 20 }
標題名稱：前端百題斬——從驗證點到手撕New操作符
本文網(wǎng)址：http://www.dlmjj.cn/article/dhigggp.html
