為了弄清楚Javascript原型鏈中的this指向問題，我寫了個代碼來測試：

var d = {d: 40};var a = {x: 10,calculate: function (z) {return this.x + this.y + z + this.d},__proto__:d};var b = {y: 20,__proto__: a};var c = {y: 30,__proto__: a};

　　運行如下的代碼進行測試：

console.log(b.calculate(30)); // 100 console.log(c.calculate(40)); // 120

　　從這個結果中可以看出 this.y 和 this.d 都獲取到了值。但是如何找到值的呢。

翻閱資料得出：this這個值在一個繼承機制中，仍然是指向它原本屬于的對象，而不是從原型鏈上找到它時，它所屬于的對象。

? ? 此時我們得出 b.calculate(30)中的this指的就是 b 對象。

　　1. this.x的值首先在 b對象中找，沒找到，就沿著原型鏈找，在b的原型a中找到了值是10。

　　2.this.y的值首先在 b對象中找，找到了，值為20.

?　　3.this.d的值首先在b對象中找，沒找到，就沿著原型鏈找，在b的原型a中也沒找到，然后在a的原型d中找，找到了值是40.

? ? ? 4.此時運算?this.x + this.y + z + this.d=10+20+30+40=100.

? 同理: c.calculate(40) 的值就是 10+30+40+40=120

?此時我們把代碼再修改下：

var d = {d: 40};var a = {x: 10,calculate: function (z) {console.log(x);console.log(y);console.log(z);console.log(d);return x + y + z + d //去掉了this},__proto__:d};var b = {y: 20,__proto__: a};var c = {y: 30,__proto__: a};

　　在運行：

console.log(b.calculate(30))

　　得出結果：

?此時在 方法calculate中是沒有定義 x 這個變量的。 所以就 提示 x is not defined.

轉載于:https://www.cnblogs.com/huaan011/p/6812973.html

總結

以上是生活随笔為你收集整理的javascript原型链中 this 的指向的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。