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 协议》,转载必须注明作者和本文链接