探索javascript中new操作符
阿新 • • 發佈:2020-11-24
new操作符相信大家平時都用得不少,為了知其所以然,今天我們一起探索下new操作。
首先,我們先思考下通過new操作符生成的物件都有哪些特點呢。
1. 是一個物件;
2. 具備建構函式原型物件的屬性;
3. 具備建構函式中this繫結的屬性。
接下來我們分別來探討下這三個特點。
1. 是一個物件。
這一點相信很好理解,通過new操作符建立的是一個物件。可以配合下面例子理解:
function Person() {} var person1 = new Person(); console.log(Object.prototype.toString.call(person1)); //[object Object]
2.具備建構函式原型物件的屬性。相信瞭解“原型”概念就能很好的理解這句話了。大家可以瞭解之前的一篇部落格。同樣我們也列舉一個例子:
function Person() {} Person.prototype.name = '張三'; var person1 = new Person(); console.log(person1.name); //張三
3.具備建構函式中繫結的屬性。這句話可能有點令人迷糊,我們同樣也列舉一個例子:
function Person() { this.age = 19; } Person.prototype.name = '張三'; var person1 = newPerson(); console.log(person1.age); //19
剛才我們已經瞭解了new操作符生產的物件具備了一些特性。接下來,我們自己寫一個方法實現這些功能。
我們依然根據特性來一步步實現new功能。
1. 是一個物件。
function myNew() { let ret = {}; return ret; }
現在我們返回了一個全新的物件。
2.具備建構函式原型物件的屬性。
function myNew() { const con = arguments[0]; const params = [...arguments].splice(1); let ret = {}; ret.__proto__ = con.prototype; return ret; }
3.具備建構函式中繫結的屬性。
function myNew() { const con = arguments[0]; const params = [...arguments].splice(1); let ret = {}; ret.__proto__ = con.prototype; con.call(ret, ...params); return ret; }
至此,我們已經完成了這三個特性的實現。最後,附上全部的測試程式碼。
function Person(sex) { this.age = 19; this.sex = sex; } Person.prototype.name = '張三' var person2 = myNew(Person, "men"); console.log({ name: person2.name, age: person2.age, sex: person2.sex }); //{name: "張三", age: 19, sex: "men"} function myNew() { const con = arguments[0]; const params = [...arguments].splice(1); let ret = {}; ret.__proto__ = con.prototype; con.call(ret, ...params); return ret; }
淺陋見識,不足之處,請大神指正。