typescript 中的 this 类型
<p>typescript中，this 也是一种类型，一个计算器的例子：</p><div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class Counter{
constructor(public count:number </span>= 0<span style="color: rgba(0, 0, 0, 1)">){}
add(value:number){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.count +=<span style="color: rgba(0, 0, 0, 1)"> value
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">
}
subtract(value:number){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.count -=<span style="color: rgba(0, 0, 0, 1)"> value
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">
}
}
let counter </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Counter(10<span style="color: rgba(0, 0, 0, 1)">)
console.log(counter.count) </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 10</span>
counter.add(2).subtract(3<span style="color: rgba(0, 0, 0, 1)">)
console.log(counter.count) </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 9</span></pre>
</div>
<p>这里 this 指的是实例对象，每个方法都返回 this 类型时，我们就可以通过链式调用的形式来使用这些方法。</p>
<p> </p>
<p>上面的类使用了 this 类型，你可以继承它，新的类可以直接使用之前的方法，不需要做任何的改变。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class PowerCounter extends Counter{
constructor(public count:number){
super(count)
}
pow(value:number){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.count = <span style="color: rgba(0, 0, 255, 1)">this</span>.count **<span style="color: rgba(0, 0, 0, 1)"> value
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">
}
}
let powcounter </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> PowerCounter(2<span style="color: rgba(0, 0, 0, 1)">)
powcounter
.pow(</span>3<span style="color: rgba(0, 0, 0, 1)">)
.add(</span>3<span style="color: rgba(0, 0, 0, 1)">)
.subtract(</span>1<span style="color: rgba(0, 0, 0, 1)">)
console.log(powcounter.count) </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 10</span></pre>
</div>
<p>PowerCounter 继承了 Counter，本身只定义了 pow 这个实例方法，但是因为返回了 this 类型，所以可以使用父类中的方法。</p>
<p> </p>
<p>在对象中，属性值可以是一个函数，函数内访问 this，默认情况下是对这个对象的引用，this 类型也就是这个对象的字面量类型：</p>
<div class="cnblogs_code">
<pre>const info =<span style="color: rgba(0, 0, 0, 1)"> {
name:</span>'Tom'<span style="color: rgba(0, 0, 0, 1)">,
getName(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.name <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Tom 这里的 this 类型是 {name:string, getName():string}</span>
<span style="color: rgba(0, 0, 0, 1)">}
}</span></pre>
</div>
<p>如果显式指定了 this 类型，那么 this 的类型就改变了：</p>
<div class="cnblogs_code">
<pre>const info =<span style="color: rgba(0, 0, 0, 1)"> {
name:</span>'Tom'<span style="color: rgba(0, 0, 0, 1)">,
getName(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">:{age:number}){
</span><span style="color: rgba(0, 0, 255, 1)">this</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里的 this 类型就是 {age: number}</span>
<span style="color: rgba(0, 0, 0, 1)">}
}</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/wjaaron/p/12974604.html
頁:
[1]