TypeScript 编译 class

先看一个简单的类,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 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
未填写
文章
32
粉丝
11
喜欢
113
收藏
86
排名:138
访问:3.5 万
私信
所有博文