前端:面向對象編程-this 關鍵字

涵義

this關鍵字是一個非常重要的語法點。毫不誇張地說,不理解它的含義,大部分開發任務都無法完成。

前一章已經提到,this可以用在構造函數之中,表示實例對象。除此之外,this還可以用在別的場合。但不管是什麼場合,this都有一個共同點:它總是返回一個對象。

簡單說,this就是屬性或方法“當前”所在的對象。

this.property

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

下面是一個實際的例子。

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

person.describe()
// "姓名:張三"

上面代碼中,this.name表示name屬性所在的那個對象。由於this.name是在describe方法中調用,而describe方法所在的當前對象是person,因此this指向personthis.name就是person.name

由於對象的屬性可以賦給另一個對象,所以屬性所在的當前對象是可變的,即this的指向是可變的。

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

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

B.describe = A.describe;
B.describe()
// "姓名:李四"

上面代碼中,A.describe屬性被賦給B,於是B.describe就表示describe方法所在的當前對象是B,所以this.name就指向B.name

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

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

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

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

A.describe() // "姓名:張三"
B.describe() // "姓名:李四"

上面代碼中,函數f內部使用了this關鍵字,隨着f所在的對象不同,this的指向也不同。

只要函數被賦給另一個變量,this的指向就會變。

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

var name = '李四';
var f = A.describe;
f() // "姓名:李四"

上面代碼中,A.describe被賦值給變量f,內部的this就會指向f運行時所在的對象(本例是頂層對象)。

再看一個網頁編程的例子。

<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>

上面代碼是一個文本輸入框,每當用戶輸入一個值,就會調用onChange回調函數,驗證這個值是否在指定範圍。瀏覽器會向回調函數傳入當前對象,因此this就代表傳入當前對象(即文本框),然後就可以從this.value上面讀到用戶的輸入值。

總結一下,JavaScript 語言之中,一切皆對象,運行環境也是對象,所以函數都是在某個對象之中運行,this就是函數運行時所在的對象(環境)。這本來並不會讓用戶糊塗,但是 JavaScript 支持運行環境動態切換,也就是說,this的指向是動態的,沒有辦法事先確定到底指向哪個對象,這纔是最讓初學者感到困惑的地方。

實質

JavaScript 語言之所以有 this 的設計,跟內存裏面的數據結構有關係。

var obj = { foo:  5 };

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

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

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

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

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

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

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

{
  foo: {
    [[value]]: 函數的地址
    ...
  }
}

由於函數是一個單獨的值,所以它可以在不同的環境(上下文)執行。

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

// 單獨執行
f()

// obj 環境執行
obj.f()

JavaScript 允許在函數體內部,引用當前環境的其他變量。

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

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

現在問題就來了,由於函數可以在不同的運行環境執行,所以需要有一種機制,能夠在函數體內部獲得當前的運行環境(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

上面代碼中,函數f在全局環境執行,this.x指向全局環境的x;在obj環境執行,this.x指向obj.x

使用場合

this主要有以下幾個使用場合。

(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)對象的方法

如果對象的方法裏面包含thisthis的指向就是方法運行時所在的對象。該方法賦值給另一個對象,就會改變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就是一個值。這個值真正調用的時候,運行環境已經不是obj了,而是全局環境,所以this不再指向obj

可以這樣理解,JavaScript 引擎內部,objobj.foo儲存在兩個內存地址,稱爲地址一和地址二。obj.foo()這樣調用時,是從地址一調用地址二,因此地址二的運行環境是地址一,this指向obj。但是,上面三種情況,都是直接取出地址二進行調用,這樣的話,運行環境就是全局環境,因此this指向全局環境。上面三種情況等同於下面的代碼。

// 情況一
(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

使用注意點

避免多層 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

上面代碼定義了變量that,固定指向外層的this,然後在內層使用that,就不會發生this指向的改變。

事實上,使用一個變量固定this的值,然後內層函數調用這個變量,是非常常見的做法,請務必掌握。

JavaScript 提供了嚴格模式,也可以硬性避免這種問題。嚴格模式下,如果函數內部的this指向頂層對象,就會報錯。

var counter = {
  count: 0
};
counter.inc = function () {
  'use strict';
  this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property 'count' of undefined

上面代碼中,inc方法通過'use strict'聲明採用嚴格模式,這時內部的this一旦指向頂層對象,就會報錯。

避免數組處理方法中的 this

數組的mapforeach方法,允許提供一個函數作爲參數。這個函數內部不應該使用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

避免回調函數中的 this

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

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

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

上面代碼中,點擊按鈕以後,控制檯會顯示false。原因是此時this不再指向o對象,而是指向按鈕的 DOM 對象,因爲f方法是在按鈕對象的環境中被調用的。這種細微的差別,很容易在編程中忽視,導致難以察覺的錯誤。

爲了解決這個問題,可以採用下面的一些方法對this進行綁定,也就是使得this固定指向某個對象,減少不確定性。

綁定 this 的方法

this的動態切換,固然爲 JavaScript 創造了巨大的靈活性,但也使得編程變得困難和模糊。有時,需要把this固定下來,避免出現意想不到的情況。JavaScript 提供了callapplybind這三個方法,來切換/固定this的指向。

Function.prototype.call()

函數實例的call方法,可以指定函數內部this的指向(即函數執行時所在的作用域),然後在所指定的作用域中,調用該函數。

var obj = {};

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

f() === window // true
f.call(obj) === obj // true

上面代碼中,全局環境運行函數f時,this指向全局環境(瀏覽器爲window對象);call方法可以改變this的指向,指定this指向對象obj,然後在對象obj的作用域中運行函數f

call方法的參數,應該是一個對象。如果參數爲空、nullundefined,則默認傳入全局對象。

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

上面代碼中,a函數中的this關鍵字,如果指向全局對象,返回結果爲123。如果使用call方法將this關鍵字指向obj對象,返回結果爲456。可以看到,如果call方法沒有參數,或者參數爲nullundefined,則等同於指向全局對象。

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

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

f.call(5)
// Number {[[PrimitiveValue]]: 5}

上面代碼中,call的參數爲5,不是對象,會被自動轉成包裝對象(Number的實例),綁定f內部的this

call方法還可以接受多個參數。

func.call(thisValue, arg1, arg2, ...)

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

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

add.call(this, 1, 2) // 3

上面代碼中,call方法指定函數add內部的this綁定當前環境(對象),並且參數爲12,因此函數add運行後得到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

上面代碼中,hasOwnPropertyobj對象繼承的方法,如果這個方法一旦被覆蓋,就不會得到正確結果。call方法可以解決這個問題,它將hasOwnProperty方法的原始定義放到obj對象上執行,這樣無論obj上有沒有同名方法,都不會影響結果。

Function.prototype.apply()

apply方法的作用與call方法類似,也是改變this指向,然後再調用該函數。唯一的區別就是,它接收一個數組作爲函數執行時的參數,使用格式如下。

func.apply(thisValue, [arg1, arg2, ...])

apply方法的第一個參數也是this所要指向的那個對象,如果設爲nullundefined,則等同於指定全局對象。第二個參數則是一個數組,該數組的所有成員依次作爲參數,傳入原函數。原函數的參數,在call方法中必須一個個添加,但是在apply方法中,必須以數組形式添加。

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

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

上面代碼中,f函數本來接受兩個參數,使用apply方法以後,就變成可以接受一個數組作爲參數。

利用這一點,可以做一些有趣的應用。

(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' ]

空元素與undefined的差別在於,數組的forEach方法會跳過空元素,但是不會跳過undefined。因此,遍歷內部元素的時候,會得到不同的結果。

var a = ['a', , 'b'];

function print(i) {
  console.log(i);
}

a.forEach(print)
// a
// b

Array.apply(null, a).forEach(print)
// 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]

上面代碼的apply方法的參數都是對象,但是返回結果都是數組,這就起到了將對象轉成數組的目的。從上面代碼可以看到,這個方法起作用的前提是,被處理的對象必須有length屬性,以及相對應的數字鍵。

(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);

上面代碼中,點擊按鈕以後,控制檯將會顯示true。由於apply方法(或者call方法)不僅綁定函數執行時所在的對象,還會立即執行函數,因此不得不把綁定語句寫在一個函數體內。更簡潔的寫法是採用下面介紹的bind方法。

Function.prototype.bind()

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

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

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

上面代碼中,我們將d.getTime方法賦給變量print,然後調用print就報錯了。這是因爲getTime方法內部的this,綁定Date對象的實例,賦給變量print以後,內部的this已經不指向Date對象的實例了。

bind方法可以解決這個問題。

var print = d.getTime.bind(d);
print() // 1481869925657

上面代碼中,bind方法將getTime方法內部的this綁定到d對象,這時就可以安全地將這個方法賦值給其他變量了。

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

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

var func = counter.inc.bind(counter);
func();
counter.count // 1

上面代碼中,counter.inc方法被賦值給變量func。這時必須用bind方法將inc內部的this,綁定到counter,否則就會出錯。

this綁定到其他對象也是可以的。

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

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

上面代碼中,bind方法將inc方法內部的this,綁定到obj對象。結果調用func函數以後,遞增的就是obj內部的count屬性。

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方法除了綁定this對象,還將add函數的第一個參數x綁定成5,然後返回一個新函數newAdd,這個函數只要再接受一個參數y就能運行了。

如果bind方法的第一個參數是nullundefined,等於將this綁定到全局對象,函數運行時this指向頂層對象(瀏覽器爲window)。

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

var plus5 = add.bind(null, 5);
plus5(10) // 15

上面代碼中,函數add內部並沒有this,使用bind方法的主要目的是綁定參數x,以後每次運行新函數plus5,就只需要提供另一個參數y就夠了。而且因爲add內部沒有this,所以bind的第一個參數是null,不過這裏如果是其他對象,也沒有影響。

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

上面代碼中,callIt方法會調用回調函數。這時如果直接把counter.inc傳入,調用時counter.inc內部的this就會指向全局對象。使用bind方法將counter.inc綁定counter以後,就不會有這個問題,this總是指向counter

還有一種情況比較隱蔽,就是某些數組方法可以接受一個函數當作參數。這些函數內部的this指向,很可能也會出錯。

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

obj.print()
// 沒有任何輸出

上面代碼中,obj.print內部this.timesthis是指向obj的,這個沒有問題。但是,forEach方法的回調函數內部的this.name卻是指向全局對象,導致沒有辦法取到值。稍微改動一下,就可以看得更清楚。

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]

上面的代碼中,數組的slice方法從[1, 2, 3]裏面,按照指定位置和長度切分出另一個數組。這樣做的本質是在[1, 2, 3]上面調用Array.prototype.slice方法,因此可以用call方法表達這個過程,得到同樣的結果。

call方法實質上是調用Function.prototype.call方法,因此上面的表達式可以用bind方法改寫。

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

上面代碼的含義就是,將Array.prototype.slice變成Function.prototype.call方法所在的對象,調用時就變成了Array.prototype.slice.call。類似的寫法還可以用於其他數組方法。

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

上面代碼的含義就是,將Function.prototype.bind方法綁定在Function.prototype.call上面,所以bind方法就可以直接使用,不需要在函數實例上使用。

來源:https://wangdoc.com/javascript/oop/this.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章