this指向及改變this指向的方法
阿新 • • 發佈：2019-04-28
cal 調用 this btn app 方式 參數 apply 目標
一、函數的調用方式決定了 this 的指向不同，但總的原則，this指的是調用函數的那個對象：
1.普通函數調用，此時 this 指向 全局對象window
function fn() { console.log(this); // window } fn(); // window.fn（),此處默認省略window
2.在嚴格模式下"use strict",為undefined.
function foo(){ "use strict"; //表示使用嚴格模式 console.log(this); //在嚴格模式下this指向undefined } foo();
3.對象的方法裏調用,this指向調用該方法的對象
let person = { name:‘Lucy‘, age:20, say:function(){ console.log(this); //object person console.log(this.name); //Lucy } } person.say();
4.構造函數調用， 此時 this 指向 new出來的實例對象
function Person(age, name) {this.age = age; this.name = name console.log(this) // 此處 this 分別指向 Person 的實例對象 p1 p2 } var p1 = new Person(18, ‘zs‘) var p2 = new Person(18, ‘ww‘)
5.通過事件綁定的方法， 此時 this 指向 綁定事件的對象
<body>
<button id="btn">hh</button>
<script>
var
6.定時器函數， 此時 this 指向 全局對象window
var name = "Tom"; var person = { name:‘Lucy‘, age:20, say:function(){ console.log(this); //object person console.log(this.name); //Lucy setTimeout(function(){ console.log(this.name); //此處this指向全局對象window，故此時輸出Tom },1000) } } person.say();
二、更改this指向的三個方法
1.call() 方法
call(thisScope, arg1, arg2, arg3...)
call,可以傳入多個參數,改變this指向後立刻調用函數
var Person = { name:"lixue", age:21 } function fn(x,y){ console.log(x+","+y); console.log(this); } fn("hh",20);
沒錯，就像上面說的，普通函數的this指向window，現在讓我們更改this指向
var Person = { name:"lixue", age:21 } function fn(x,y){ console.log(x+","+y); console.log(this); console.log(this.name); console.log(this.age); } fn.call(Person,"hh",20);
看，現在this就指向person了
2.apply() 方法
apply(thisScope, [arg1, arg2, arg3...]);兩個參數
apply() 與call（）非常相似，不同之處在於提供參數的方式，apply（）使用參數數組，而不是參數列表
3.bind()方法
bind(thisScope, arg1, arg2, arg3...)，bind 改變this的指向，返回的是函數
bind()創建的是一個新的函數（稱為綁定函數），與被調用函數有相同的函數體，當目標函數被調用時this的值綁定到 bind()的第一個參數上
三、改變this指向的例子
var oDiv1 = document.getElementById("div1"); oDiv1.onclick = function(){ setTimeout(function(){ console.log(this); //定時器裏的this指向window },1000) }
沒錯，就像上面所說，定時器裏的this指向window，那麽怎麽改成指向div呢
var oDiv1 = document.getElementById("div1"); oDiv1.onclick = function(){ setTimeout(function(){ console.log(this); }.bind(this),1000) }
因為在定時器外，在綁定事件中的this肯定指向綁定事件的對象div啊，用call和apply都行
上圖就是用bind改變了this指向，但改變定時器中的this指向，我們有個更好的方法
var name = "Tom"; var person = { name:‘Lucy‘, age:20, say:function(){ var _this = this; //定義一個_this變量來存儲this console.log(this.name); //Lucy setTimeout(function(){ console.log(_this.name); //Lucy console.log(_this.age); //20 },1000) } } person.say();
定義一個_this變量來存儲this值,使全局對象裏面的this 指向person 的this
this指向及改變this指向的方法