JavaScript this 指針歸納(apply、call、bind)

Pink 發(fā)布于2019-08-26 13:47 / 2181人閱讀

摘要：概述一個(gè)函數(shù)中的指向是由調(diào)用這個(gè)函數(shù)的環(huán)境來決定的。實(shí)例參數(shù)參數(shù)和一樣，不同的是和在調(diào)用函數(shù)之后會(huì)立即執(zhí)行，而方法調(diào)用并改變函數(shù)運(yùn)行時(shí)上下文后，返回一個(gè)新的函數(shù)，供我們需要時(shí)再調(diào)用。

概述

一個(gè)函數(shù)中this的指向是由調(diào)用這個(gè)函數(shù)的環(huán)境來決定的。

全局

var a = 1;
function b(){
    var a = 2;
    console.log(this.a);
};
b(); //1



var value = 3;
function b(){
    console.log(this.value);
};
b();//3
此時(shí)的b函數(shù)的環(huán)境是全局的

局部

   var a = 1;
   var c = {a:3};
   c.b = function(){
   var a = 2;
   console.log(this.a);
   };
   c.b();//3
   
  //立即執(zhí)行函數(shù) 由于是賦值，所以只執(zhí)行了右邊的函數(shù)
  var a = 1;
  var c = {a:3};
  (c.b = function(){
  var a = 2;
  console.log(this.a);
  })();//1

apply、call 和 bind 改變this指向

apply

參數(shù)

只能傳兩個(gè)參數(shù)，第一個(gè)參數(shù)a是改變this指向的結(jié)果對(duì)象(在非嚴(yán)格模式下，第一個(gè)參數(shù)為null或者undefined時(shí)會(huì)自動(dòng)替換為指向全局對(duì)象)，第二個(gè)參數(shù)是傳給a的參數(shù)集合（arguments[數(shù)組或類數(shù)組]）；

實(shí)例

var a = 1;
var c = {a : 3};
function b(d,e){
    var a = 2;
    console.log(this.a);
    console.log(d,e);
};
b.apply(c);//3  undefined undefined
b.apply();//1  undefined undefined
b.apply(c,[5,6]);// 3  5 6

call

參數(shù)

第一個(gè)參數(shù)和apply()的第一個(gè)參數(shù)一樣，不同的是apply()后面是接收一個(gè)數(shù)組或類數(shù)組，call()后面是是接收的參數(shù)列表。

實(shí)例

var a = 1;
var c = {a : 3};
function b(d,e){
    var a = 2;
    console.log(this.a);
    console.log(d,e);
};
b.call(c);//3  undefined undefined
b.call();//1  undefined undefined
b.call(c,5,6);// 3  5 6

bind

參數(shù)

參數(shù)和call一樣，不同的是 call()和apply()在調(diào)用函數(shù)之后會(huì)立即執(zhí)行，而bind()方法調(diào)用并改變函數(shù)運(yùn)行時(shí)上下文后，返回一個(gè)新的函數(shù)，供我們需要時(shí)再調(diào)用。

實(shí)例

var a = 1;
var c = {a : 3};
function b(d,e){
   var a = 2;
   console.log(this.a);
   console.log(d,e);
};
var b1 = b.bind(c);
var b2 =b.bind();
var b3 =b.bind(c,5,6);
b1();//3  undefined undefined
b2();//1  undefined undefined
b3()// 3  5 6