改變this指向的三種常用方法
阿新 • • 發佈:2019-02-10
JavaScript中this的是一個值得深入的話題,下面總結了改變this指向的3種常用方法。首先弄清楚函式這個概念:函式本身就是一種特殊型別,要時刻明白一點,函式也可以認為是一種變數。
1.通過物件的方法來定義一個函式(誰綁定了我,我就指向誰)
通俗的話來說,就是如果這個函式是某個物件的方法(key),那麼函式中的this就指向這個物件。 var a = function(obj)
{
alert(this == obj);
}
var obj = {};
obj.fun = a;
obj.fun(obj); //true
這個函式就相當於一個變數,當它被繫結到一個物件的下面,那麼這時候this的指向就會從預設的window物件 改變為obj物件。
2.函式被new了一下,建立了新的物件,this指向新的物件(誰new了我,我就指向誰)
var obj = new a(); 通過這條語句新建立了一個物件,把函式中的this指向了obj。3.通過call,apply改變this指向
1.apply方法 param1: show函式中this的指向param2: 一個集合 []
例: 被調函式名.apply(param1, param2);
回顧第一種方法
簡單的,通過apply一句話搞定var a = function(o) { alert(this == o); } var obj = {}; obj.fun = a; obj.fun(obj); //true
a.apply(obj,[obj]);
2.call方法
param1: show函式中this的指向param2: 第二引數開始都是show函式實際引數
例: 被調函式名.call(param1,param2,param3);
a.call(obj,obj);
簡單例項: 通過each函式給多個元素新增樣式
function each(tagName, callback) { var lists = document.getElementsByTagName(tagName); for (var i = 0; i < lists.length; i++) { callback.apply(lists[i]); } } each("a", function () { this.style.background = "#ccc"; }