javascript:this

ShevaKuilin 發(fā)布于2019-08-21 10:45 / 2821人閱讀

摘要：關(guān)于是函數(shù)內(nèi)部的一個(gè)特殊對象引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象在調(diào)用函數(shù)前的值并不確定不同的調(diào)用方式會(huì)導(dǎo)致值的改變。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù)，實(shí)際上等于設(shè)置函數(shù)體內(nèi)對象的值。

關(guān)于this

this是函數(shù)內(nèi)部的一個(gè)特殊對象,this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象,在調(diào)用函數(shù)前this的值并不確定,不同的調(diào)用方式會(huì)導(dǎo)致this值的改變。
可結(jié)合這篇文章理解環(huán)境對象的概念

window.num = 22;
var o = {num: 11};
function sayNum(){
    alert(this.num)
}
sayNum();//22
o.sayNum = sayNum;
o.sayNum();//11

記住：函數(shù)名僅僅是一個(gè)包含指針的變量而已。因此即使是在不同的環(huán)境中執(zhí)行，全局的sayNum()函數(shù)與o.sayNum()指向的仍然是同一個(gè)函數(shù)。

1.全局作用域中調(diào)用函數(shù)時(shí)

全局作用域中調(diào)用，this對象引用的是window
匿名函數(shù)的執(zhí)行具有全局性，因此其this對象通常也指向window

function fn1(){
    console.log(this);
}

fn1();

2.通過new操作符調(diào)用

this引用的是實(shí)例對象

function Person(name){
    this.name = name;
}
Person.prototype.printName = function(){
    alert(this.name);//Byron
};

var p1 = new Person("Byron");

3.作為對象的方法調(diào)用

this引用的是該對象

var obj1 = {
    name: "Byron",
    fn : function(){
        console.log(this);
    }
};

obj1.fn();

4.間接調(diào)用 call和apply

每個(gè)函數(shù)都包含兩個(gè)非繼承而來的方法：call()和apply()。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù)，實(shí)際上等于設(shè)置函數(shù)體內(nèi)this對象的值。也就是說，直接調(diào)用函數(shù)，調(diào)用時(shí)指定執(zhí)行環(huán)境是誰

window.color = "red";
var o = {color: "blue"};
function sayColor(){
    alert(this.color);
}
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue

1.apply方法

接收兩個(gè)參數(shù)，一個(gè)是在函數(shù)中運(yùn)行函數(shù)的作用域，另一個(gè)是參數(shù)數(shù)組。

2.call方法

call方法與apply方法相同，區(qū)別在于接收參數(shù)的方式不同，對于call方法而言，第一個(gè)參數(shù)是this值沒有變化，變化的是其余參數(shù)都直接傳遞給函數(shù)。

function fn(){
     console.log(this)//windwow
     function InnerFn(){
          console.log(this)
     }
     InnerFn.call(this)//window
}
fn();

  function fn0(){
     console.log(this)//window
}
function fn1(){
     fn0.call(this);
     console.log(this);//window
}
fn1();

function fn0(){
 console.log(this)//object
}
var o = {
    fn1: function fn1(){
        fn0.call(this);
        console.log(this);//object
    }
}
o.fn1();

bind方法

這個(gè)方法會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例，其this值會(huì)被綁定到傳給bind()函數(shù)的值。也就是說會(huì)返回一個(gè)新函數(shù)，并且使函數(shù)內(nèi)部的this為傳入的第一個(gè)參數(shù)

window.color = "red";
var o = {color : "blue"};
function sayColor(){
    alert(this.color)
}
var objectSayColor = sayColor.bind(o);
objectSayColor();//blue