JS實現new關鍵字的功能

一.前言app

衆所周知:沒有對象怎麼辦?那就new一個!函數

那麼在JS中,當咱們new一個對象的時候,這個new關鍵字內部都幹了什麼呢?測試

如今咱們就來剖析一下原生JS中new關鍵字內部的工做原理。this

二.原始的newprototype

首先,咱們先new一個對象看看:code

//建立Person構造函數,參數爲name,age
function Person(name,age){
  this.name = name;
  this.age = age;
 }
//實例化對象小明
xm = new Person('xiaoming',18);
//打印實例化出來的對象小明
console.log(xm);

打印結果:對象

從打印結果中能夠看到:繼承

用new關鍵字實例化對象時,首先建立了一個空對象xm,而且這個空對象包含兩個屬性name和age,分別對應構造函數中的兩個屬性,其次咱們也能夠知道實例化出來的這個對象xm是繼承自Person.prototype,那麼如今咱們就能夠總結出new關鍵字在實例化對象時內部都幹了什麼,其實,new關鍵字內部幹了以下三件事(已知構造函數爲Func):io

1.建立一個空對象,並使該空對象繼承Func.prototype;console

2.執行構造函數,並將this指向剛剛建立的新對象;

3.返回新對象;

三.封裝_new函數

當咱們知道new關鍵字的內部原理後,咱們就能夠封裝一個_new函數,使其用於與new關鍵字一樣的功能。

_new函數須要傳入如下幾個參數:

第一個參數:構造函數名Func;

第二個參數及後面的參數:構造函數的參數

function _new(){
 //1.拿到傳入的參數中的第一個參數,即構造函數名Func
  var Func = [].shift.call(arguments);
  //2.建立一個空對象obj,並讓其繼承Func.prototype
  var obj = Object.create(Func.prototype);
  //3.執行構造函數,並將this指向建立的空對象obj
  Func.apply(obj,arguments)
  //4.返回建立的對象obj
  return obj
}

四.測試_new函數

封裝好後,咱們來測試一下封裝的_new函數,看看它是否實現了和原生new關鍵字一樣的功能。

//建立Person構造函數,參數爲name,age
function Person(name,age){
  this.name = name;
  this.age = age;
} 
function _new(){
  //1.拿到傳入的參數中的第一個參數,即構造函數名Func
  var Func = [].shift.call(arguments);
  //2.建立一個空對象obj,並讓其繼承Func.prototype
  var obj = Object.create(Func.prototype);
  //3.執行構造函數,並將this指向建立的空對象obj
  Func.apply(obj,arguments)
  //4.返回建立的對象obj
  return obj
}
xm = _new(Person,'xiaoming',18);
console.log(xm);

測試結果:

從測試結果看到,_new函數的功能與new關鍵字徹底一致。

總結

以上所述是小編給你們介紹的原生JS封裝_new函數實現new關鍵字的功能,但願對你們有所幫助,若是你們有任何疑問歡迎給我留言,小編會及時回覆你們的!

相關文章
相關標籤/搜索