new原理分析

2021-09-29 23:54:38 字數 2038 閱讀 9027

首先先來段我們熟悉的**

function person(name, age) 

person.prototype.say = function()

let girl = new person('weboof', 18);

console.log(girl.name);

console.log(girl.age);

girl.say();

這是我們經常看到並且常用的**由此可以看出通過new建立出來的例項有以下幾個特徵:

接下來按照以上總結內容我們試著自己實現以下new操作符。首先我們需要了解以下幾個問題點:

簡易版

function creat(construction, ...args);

construction.call(obj, ...args); //繼承建構函式內部屬性和方法

object.setprototypeof(obj, construction.prototype); //連線原型

return obj;

}function person(name, age)

person.prototype.say = function()

let girl = creat(person, 'weboof', 18);

console.log(girl.name); //weboof

console.log(girl.age); //18

girl.say(); // i can speak

我們看到以上方法已經可以實現乙個簡易的new操作符了。接下來我們還需要討論一下當建構函式有返回值時會出現什麼情況?

建構函式返回原始型別

function person(name, age) 

person.prototype.say = function()

let girl = new person('weboof', 18);

console.log(girl.name); //weboof

console.log(girl.age); //18

girl.say(); //i can speak

由此我們可以看出如果建構函式返回值為原始型別時對於建立出來的例項不會有任何影響。

建構函式返回物件型別

function person(name, age) 

}person.prototype.say = function()

let girl = new person('weboof', 18);

console.log(girl.name); //hanhh

console.log(girl.age); //undefined

girl.say(); //vm267:17 uncaught typeerror: girl.say is not a function

由此可以看出如果建構函式返回的值為物件型別通過建構函式建立出的例項是會受到返回值的影響並且不會繼承建構函式原型鏈上的屬性和方法。

完整**如下

function creat(con, ...args) ;

//obj可以訪問建構函式上面的屬性和方法

// let result = con.call(obj, ...args);

if(result instanceof object) else

}

以上就是對new操作符的詳細解釋,希望對你有幫助~

new命令的原理

function person name,age var person new person 小明 18 console.log person.name 小明 console.log person.age 18建立乙個空物件,這個物件將會是new person 返回的物件例項 將這個空物件的原型指向...

new的操作原理

簡單記錄下new乙個js物件時,做了什麼事情。1 建立乙個空物件 2 將1中建立的空物件的 proto 屬性指向建構函式的prototype屬性。3 將建構函式的this指定為1中建立的空物件。4 執行建構函式 為this繫結屬性 複製等操作 5.1 如果建構函式有返回值,且返回型別為引用型別,則將...

new的實現原理

new的特點 new乙個建構函式,會自動return乙個例項物件 new完成的例項化物件,proto 自動指向建構函式的prototype new建構函式傳參自動賦值給當前例項化物件 防抖 在固定的時間內沒有觸發事件,會在固定時間結束後觸發,如果固定時間內觸發事件了,會在延長固定時間內觸發 節流 無...