TypeScript 編譯 class

zhaiduting發表於2020-06-07
TypeScript編譯

先看一個簡單的類，ts程式碼如下

class Person{
    constructor(private name: string){}
    say(){
        console.log(`My name is ${this.name}`)
    }
}

let p1= new Person('Tom')
p1.say= ()=>{};    //改寫say方法
p1.say()        //沒有輸出資訊

let p2= new Person('Rose')
p2.say()        //輸出Rose，結果不受p1.say的影響

ts被編譯成js後才能在瀏覽器中執行，再看編譯後的js程式碼

var Person = (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.say = function () {
        console.log("My name is " + this.name);
    };
    return Person;
}());

var p1 = new Person('Tom');
p1.say = function () { };
p1.say();    //啥也沒說

var p2 = new Person('Rose');
p2.say();    //我是Rose

從這段程式碼可以看出p1、p2共享了同一個原型，對於類的成員方法say()編譯後直接掛載到函式原型上。因此，p1.say()和p2.say()彼此之間還是會有影響的。儘管p1.say被修改後不會影響到p2.say，但是直接修改p1.__proto__.say則會立即影響到p2.say

var p3 = new Person('Tom');
p3.__proto__.say = function () {
    console.log("Where is " + this.name)
};
p3.say();    //Tom在哪兒？

var p4 = new Person('Rose');
p4.say();    //Rose在哪兒？

p3修改了原型鏈上的say()方法，因此p4.say()輸出結果不再是“我叫Rose”而是“Rose在哪兒”。應該避免這種寫法。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章