你就說，你明不明白JavaScript的關鍵字 this？

時間 2019-12-06

原文原文鏈接

前言

最近，看了一篇關於JavaScript的關鍵字 this 的教學文章，收益甚多，所以，在這篇文章的基礎上，稍微整理了一下，分享給你們。但願能夠有助於學習JavaScript的童鞋，好好的理解 this 這個在JavaScript中最重要的關鍵字。javascript

涵義

1. 定義

this就是屬性或方法「當前」所在的對象。html

this.property
複製代碼

上面代碼中，this就表明property屬性當前所在的對象。java

下面是一個實際的例子。編程

var person = {
  name: '張三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

person.describe()
// "姓名：張三"
複製代碼

2. this的可變性

因爲對象的屬性能夠賦給另外一個對象，因此屬性所在的當前對象是可變的，即this的指向是可變的。數組

var A = {
  name: '張三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

var B = {
  name: '李四'
};

B.describe = A.describe;
B.describe()
// "姓名：李四"
複製代碼

稍稍重構這個例子，this的動態指向就能看得更清楚。瀏覽器

function f() {
  return '姓名：'+ this.name;
}

var name='王五';

var A = {
  name: '張三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名：張三"
B.describe() // "姓名：李四"
f() // "姓名：王五"
複製代碼

3. 網頁編程的應用

再看一個網頁編程的例子。數據結構

<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

<script>
function validate(obj, lowval, hival){
  if ((obj.value < lowval) || (obj.value > hival))
    console.log('Invalid Value!');
}
</script>
複製代碼

總結一下，JavaScript 語言之中，一切皆對象，運行環境也是對象，因此函數都是在某個對象之中運行，this就是函數運行時所在的對象（環境）。app

實質

1. 對象的內存地址

JavaScript 語言之因此有 this 的設計，跟內存裏面的數據結構有關係。函數

var obj = { foo:  5 };
複製代碼

上面的代碼將一個對象賦值給變量obj。JavaScript 引擎會先在內存裏面，生成一個對象{ foo: 5 }，而後把這個對象的內存地址賦值給變量obj。也就是說，變量obj是一個地址（reference）。後面若是要讀取obj.foo，引擎先從obj拿到內存地址，而後再從該地址讀出原始的對象，返回它的foo屬性。oop

原始的對象以字典結構保存，每個屬性名都對應一個屬性描述對象。舉例來講，上面例子的foo屬性，其實是如下面的形式保存的。

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}
複製代碼

注意，foo屬性的值保存在屬性描述對象的value屬性裏面。

2. 函數的內存地址

這樣的結構是很清晰的，問題在於屬性的值多是一個函數。

var obj = { foo: function () {} };
複製代碼

這時，引擎會將函數單獨保存在內存中，而後再將函數的地址賦值給foo屬性的value屬性。

{
  foo: {
    [[value]]: 函數的地址
    ...
  }
}
複製代碼

3. 函數的運行環境

因爲函數是一個單獨的值，因此它能夠在不一樣的環境（上下文）執行。

var f = function () {};
var obj = { f: f };

// 單獨執行
f()

// obj 環境執行
obj.f()
複製代碼

JavaScript 容許在函數體內部，引用當前環境的其餘變量。

var f = function () {
  console.log(x);
};
複製代碼

上面代碼中，函數體裏面使用了變量x。該變量由運行環境提供。

4. this的出現

如今問題就來了，因爲函數能夠在不一樣的運行環境執行，因此須要有一種機制，可以在函數體內部得到當前的運行環境（context）。因此，this就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。

var f = function () {
  console.log(this.x);
}
複製代碼

上面代碼中，函數體裏面的this.x就是指當前運行環境的x。

var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 單獨執行
f() // 1

// obj 環境執行
obj.f() // 2
複製代碼

使用場合

1. 全局環境

全局環境使用this，它指的就是頂層對象window。

this === window // true

function f() {
  console.log(this === window);
}
f() // true
複製代碼

上面代碼說明，不論是不是在函數內部，只要是在全局環境下運行，this就是指頂層對象window。

2. 構造函數

構造函數中的this，指的是實例對象。

var Obj = function (p) {
  this.p = p;
};
複製代碼

上面代碼定義了一個構造函數Obj。因爲this指向實例對象，因此在構造函數內部定義this.p，就至關於定義實例對象有一個p屬性。

var o = new Obj('Hello World!');
o.p // "Hello World!"
複製代碼

3. 對象的方法

若是對象的方法裏面包含this，this的指向就是方法運行時所在的對象。該方法賦值給另外一個對象，就會改變this的指向。

可是，這條規則很不容易把握。請看下面的代碼。

var obj ={
  foo: function () {
    console.log(this);
  }
};

obj.foo() // obj
複製代碼

上面代碼中，obj.foo方法執行時，它內部的this指向obj。

可是，下面這幾種用法，都會改變this的指向。

// 狀況一
(obj.foo = obj.foo)() // window
// 狀況二
(false || obj.foo)() // window
// 狀況三
(1, obj.foo)() // window
複製代碼

上面三種狀況等同於下面的代碼。

// 狀況一
(obj.foo = function () {
  console.log(this);
})()
// 等同於
(function () {
  console.log(this);
})()

// 狀況二
(false || function () {
  console.log(this);
})()

// 狀況三
(1, function () {
  console.log(this);
})()
複製代碼

若是this所在的方法不在對象的第一層，這時this只是指向當前一層的對象，而不會繼承更上面的層。

var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined
複製代碼

上面代碼中，a.b.m方法在a對象的第二層，該方法內部的this不是指向a，而是指向a.b，由於實際執行的是下面的代碼。

var b = {
  m: function() {
   console.log(this.p);
  }
};

var a = {
  p: 'Hello',
  b: b
};

(a.b).m() // 等同於 b.m()
複製代碼

若是要達到預期效果，只有寫成下面這樣。

var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};
複製代碼

若是這時將嵌套對象內部的方法賦值給一個變量，this依然會指向全局對象。

var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};

var hello = a.b.m;
hello() // undefined
複製代碼

上面代碼中，m是多層對象內部的一個方法。爲求簡便，將其賦值給hello變量，結果調用時，this指向了頂層對象。爲了不這個問題，能夠只將m所在的對象賦值給hello，這樣調用時，this的指向就不會變。

var hello = a.b;
hello.m() // Hello
複製代碼

使用注意點

1. 避免多層this

因爲this的指向是不肯定的，因此切勿在函數中包含多層的this。

var o = {
  f1: function () {
    console.log(this);
    var f2 = function () {
      console.log(this);
    }();
  }
}

o.f1()
// Object
// Window
複製代碼

上面代碼包含兩層this，結果運行後，第一層指向對象o，第二層指向全局對象，由於實際執行的是下面的代碼。

var temp = function () {
  console.log(this);
};

var o = {
  f1: function () {
    console.log(this);
    var f2 = temp();
  }
}
複製代碼

一個解決方法是在第二層改用一個指向外層this的變量。

var o = {
  f1: function() {
    console.log(this);
    var that = this;
    var f2 = function() {
      console.log(that);
    }();
  }
}

o.f1()
// Object
// Object
複製代碼

2. 避免數組處理方法中的 this

數組的map和foreach方法，容許提供一個函數做爲參數。這個函數內部不該該使用this。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    });
  }
}

o.f()
// undefined a1
// undefined a2
複製代碼

上面代碼中，foreach方法的回調函數中的this，實際上是指向window對象，所以取不到o.v的值。緣由跟上一段的多層this是同樣的，就是內層的this不指向外部，而指向頂層對象。

解決這個問題的一種方法，就是前面提到的，使用中間變量固定this。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    var that = this;
    this.p.forEach(function (item) {
      console.log(that.v+' '+item);
    });
  }
}

o.f()
// hello a1
// hello a2
複製代碼

另外一種方法是將this看成foreach方法的第二個參數，固定它的運行環境。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    }, this);
  }
}

o.f()
// hello a1
// hello a2
複製代碼

3. 避免回調函數中的 this

回調函數中的this每每會改變指向，最好避免使用。

var o = new Object();
o.f = function () {
  console.log(this === o);
}

// jQuery 的寫法
$('#button').on('click', o.f);
複製代碼

綁定 this 的方法

1. call

函數實例的call方法，能夠指定函數內部this的指向（即函數執行時所在的做用域），而後在所指定的做用域中，調用該函數。

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true
複製代碼

call方法的參數，應該是一個對象。若是參數爲空、null和undefined，則默認傳入全局對象。

var n = 123;
var obj = { n: 456 };

function a() {
  console.log(this.n);
}

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456
複製代碼

若是call方法的參數是一個原始值，那麼這個原始值會自動轉成對應的包裝對象，而後傳入call方法。

var f = function () {
  return this;
};

f.call(5)
// Number {[[PrimitiveValue]]: 5}
複製代碼

call方法還能夠接受多個參數。

func.call(thisValue, arg1, arg2, ...)
複製代碼

call的第一個參數就是this所要指向的那個對象，後面的參數則是函數調用時所需的參數。

function add(a, b) {
  return a + b;
}

add.call(this, 1, 2) // 3
複製代碼

call方法的一個應用是調用對象的原生方法。

var obj = {};
obj.hasOwnProperty('toString') // false

// 覆蓋掉繼承的 hasOwnProperty 方法
obj.hasOwnProperty = function () {
  return true;
};
obj.hasOwnProperty('toString') // true

Object.prototype.hasOwnProperty.call(obj, 'toString') // false
複製代碼

2. apply

apply方法的做用與call方法相似，也是改變this指向，而後再調用該函數。惟一的區別就是，它接收一個數組做爲函數執行時的參數，使用格式以下。

func.apply(thisValue, [arg1, arg2, ...])
複製代碼

apply方法的第一個參數也是this所要指向的那個對象，若是設爲null或undefined，則等同於指定全局對象。第二個參數則是一個數組，該數組的全部成員依次做爲參數，傳入原函數。原函數的參數，在call方法中必須一個個添加，可是在apply方法中，必須以數組形式添加。

function f(x, y){
  console.log(x + y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2
複製代碼

（1）找出數組最大元素

JavaScript 不提供找出數組最大元素的函數。結合使用apply方法和Math.max方法，就能夠返回數組的最大元素。

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15
複製代碼

（2）將數組的空元素變爲undefined

經過apply方法，利用Array構造函數將數組的空元素變成undefined。

Array.apply(null, ['a', ,'b'])
// [ 'a', undefined, 'b' ]
複製代碼

（3）轉換相似數組的對象

另外，利用數組對象的slice方法，能夠將一個相似數組的對象（好比arguments對象）轉爲真正的數組。

Array.prototype.slice.apply({0: 1, length: 1}) // [1]
Array.prototype.slice.apply({0: 1}) // []
Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]
Array.prototype.slice.apply({length: 1}) // [undefined]
複製代碼

（4）綁定回調函數的對象

前面的按鈕點擊事件的例子，能夠改寫以下。

var o = new Object();

o.f = function () {
  console.log(this === o);
}

var f = function (){
  o.f.apply(o);
  // 或者 o.f.call(o);
};

// jQuery 的寫法
$('#button').on('click', f);
複製代碼

3. bind

bind方法用於將函數體內的this綁定到某個對象，而後返回一個新函數。

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.
複製代碼

bind方法能夠解決這個問題。

var print = d.getTime.bind(d);
print() // 1481869925657
複製代碼

bind方法的參數就是所要綁定this的對象，下面是一個更清晰的例子。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1
複製代碼

this綁定到其餘對象也是能夠的。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var obj = {
  count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101
複製代碼

bind還能夠接受更多的參數，將這些參數綁定原函數的參數。

var add = function (x, y) {
  return x * this.m + y * this.n;
}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 5);
newAdd(5) // 20
複製代碼

若是bind方法的第一個參數是null或undefined，等於將this綁定到全局對象，函數運行時this指向頂層對象（瀏覽器爲window）。

function add(x, y) {
  return x + y;
}

var plus5 = add.bind(null, 5);
plus5(10) // 15
複製代碼

bind方法有一些使用注意點。

（1）每一次返回一個新函數

bind方法每運行一次，就返回一個新函數，這會產生一些問題。好比，監聽事件的時候，不能寫成下面這樣。

element.addEventListener('click', o.m.bind(o));
複製代碼

上面代碼中，click事件綁定bind方法生成的一個匿名函數。這樣會致使沒法取消綁定，因此，下面的代碼是無效的。

element.removeEventListener('click', o.m.bind(o));
複製代碼

正確的方法是寫成下面這樣：

var listener = o.m.bind(o);
element.addEventListener('click', listener);
//  ...
element.removeEventListener('click', listener);
複製代碼

（2）結合回調函數使用

回調函數是 JavaScript 最經常使用的模式之一，可是一個常見的錯誤是，將包含this的方法直接看成回調函數。解決方法就是使用bind方法，將counter.inc綁定counter。

var counter = {
  count: 0,
  inc: function () {
    'use strict';
    this.count++;
  }
};

function callIt(callback) {
  callback();
}

callIt(counter.inc.bind(counter));
counter.count // 1
複製代碼

還有一種狀況比較隱蔽，就是某些數組方法能夠接受一個函數看成參數。這些函數內部的this指向，極可能也會出錯。

var obj = {
  name: '張三',
  times: [1, 2, 3],
  print: function () {
    this.times.forEach(function (n) {
      console.log(this.name);
    });
  }
};

obj.print()
// 沒有任何輸出
複製代碼

稍微改動一下，就能夠看得更清楚。

obj.print = function () {
  this.times.forEach(function (n) {
    console.log(this === window);
  });
};

obj.print()
// true
// true
// true
複製代碼

解決這個問題，也是經過bind方法綁定this。

obj.print = function () {
  this.times.forEach(function (n) {
    console.log(this.name);
  }.bind(this));
};

obj.print()
// 張三
// 張三
// 張三
複製代碼

（3）結合call方法使用

利用bind方法，能夠改寫一些 JavaScript 原生方法的使用形式，以數組的slice方法爲例。

[1, 2, 3].slice(0, 1) // [1]
// 等同於
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]
複製代碼

call方法實質上是調用Function.prototype.call方法，所以上面的表達式能夠用bind方法改寫。

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]
複製代碼

相似的寫法還能夠用於其餘數組方法。

var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);

var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4]

pop(a)
a // [1, 2, 3]
複製代碼

若是再進一步，將Function.prototype.call方法綁定到Function.prototype.bind對象，就意味着bind的調用形式也能夠被改寫。

function f() {
  console.log(this.v);
}

var o = { v: 123 };
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)() // 123
複製代碼