this 改變this的指向

this是Javascript語言的一個關鍵字。

它代表函數運行時,自動生成的一個內部對象,只能在函數內部使用。比如,

function test()  {
     this.x = 1;
}

this 是當前執行上下文中的一部分。

this永遠指向函數的調用者。
隨着函數使用場合的不同,this的值會發生變化。但是有一個總的原則,那就是this指的是,調用函數的那個對象。

1.this指向的形式4種

a.如果是一般函數,this指向全局對象window;

b.在嚴格模式下"use strict",爲undefined.

c.對象的方法裏調用,this指向調用該方法的對象.

d.構造函數裏的this,指向創建出來的實例.

e.在事件處理函數中,this指向觸發事件的DOM對象

//a
function bar() {
    console.log(this);//一般函數,this指向全局對象window
}
bar();

//b
var foo = function() {
    "use strict";
    console.log(this);//表示使用嚴格模式;在嚴格模式下,爲undefined
}
foo();

//c
var name = 'tesla';
var car = {
    name:"bmw",
    drive: function() {
        console.log(this); //object car
        console.log(this.name); //bmw

        var that = this;//定義一個that變量來存儲this的值

        setTimeout(function(){ //setTimeout是全局函數
            console.log(this); //window
            console.log(this.name); //tesla

            console.log(that); //object car
            console.log(that.name); //bmw
        },1000);
    }
}
car.drive();

//d
var name = 'tom';
//聲明一個函數
function person() {
    console.log(arguments.length);
    this.name = arguments[0];
    this.age = arguments[1];
    console.log(this);
    console.log(this.name);
    console.log(this.age);
}
person(); //0 window undefined undefined
var tom = new person('amy',20);  //2 person -> tom amy 20

//e
//先遍歷 '.tr-s'
$('.tr-s').each(function (index,item) {
    //再遍歷 '.tr-s' 下的 'td-t'
    $(this).find('.td-t').each(function (index_s,item_s) {
        //index_s 是下標
        //item_s 是對應的對象
    })
})


2.改變this的指向

在JS中一切皆對象,函數也是對象,既然是對象就有屬性和方法,在JS中所有的方法都有兩個方法call(),apply()

我們可以使用這兩個方法來顯示更改函數中this的指向,
call、apply這兩個函數的共同特點:改變並立即執行。

區別就是傳參方式不同
call是一個一個傳入
apply是傳入一個數組,一次性傳完。

.call(), call(thisScope, arg1, arg2, arg3...)

.apply(), apply(thisScope, [arg1, arg2, arg3...]);兩個參數

在ES5中新增了bind(),該方法也是強制更改this指向

而bind 改變this的指向,返回的是函數

.bind() bind(thisScope, arg1, arg2, arg3...)

但是bind和call、apply的區別是bind更改this後不會立即執行,它會返回一個新函數。

bind傳參也是一個一個的傳入

var obj = {
    name:'tom',
    age:20
}

function show(a,b){
    console.log(a,b);
}

//獨立調用
show(1,2);

//強制更改this指向爲obj 並立即執行該函數
show.call(obj,1,2);
show.apply(obj,[1,2]);

//強制更改this指向obj,不會立即執行,它會返回一個新函數,需要主動去執行這個函數
show.bind(obj,1,2)();
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章