JavaScript的this值

時間  2019-12-05
標籤 javascript 欄目 JavaScript 简体版
原文   原文鏈接

重要 數組

JavaScript的this是有函數求值是的調用者決定的app

JavaScript的this是有函數求值是的調用者決定的異步

JavaScript的this是有函數求值是的調用者決定的函數

函數中的this

函數中的this在調用時纔有意義，函數的調用者決定函數中this的指向，每一個函數調用時都會有this屬性。this

function Point2D(x, y) {
  this.x = x;
  this.y = y;
}
Point2D.prototype.showLength = function() {
  var length = Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
  console.log(length);
};
Point2D.prototype.showLengthAsync = function() {
  var self = this;   // 將this的值保存下來，傳入異步函數

  setTimeout(function() {  // setTimeout是異步函數，在調用回調函數時沒有指定匿名函數的this，
      self.showLength();  //由於回調函數沒有指定this，非嚴格模式下默認指向全局對象
  }, 1000);
};

var x = 30, y = 40;
var p = new Point2D(3, 4);
var f = Point2D.prototype.showLength;

1.f()：輸出50，由於函數Point2D.prototype.showLength的調用者是變量f，變量f、x、y、Ponit2D函數在同一個對象中。prototype

  • 因此函數Point2D.prototype.showLength中this指向的是包含變量f、x、y、Ponit2D函數的對象。rest

  • this.x = 30，this.y = 40，因此f()是輸出50；code

Point2D.prototype.showLength = function() {
              var length = Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
              console.log(length);
            };

2.setTimeout(p.showLength, 500); ：延時500ms後輸出50。函數p.showLength的調用者是異步函數setTimeout，setTimeout不會爲回調函數指定this值。對象

  • 在非嚴格模式下，p.showLength中的this默認指向全局變量ip

  • this.x = 30，this.y = 40，因此setTimeout(p.showLength, 500)延時500ms後輸出50；

  • 借用bind()方法能夠將函數綁定到對象上，即將函數內的this指向bind(p)方法中傳入的p對象

    setTimeout(p.showLength.bind(p), 500);    // 延時500ms後輸出5，由於函數p.showLength指向對象p，p的x屬性爲3，y屬性爲4

3.p.showLengthAsync();： 延時1000ms後輸出5。

Point2D.prototype.showLengthAsync = function() {
  var self = this;   // 將this的值保存下來，傳入異步函數

  setTimeout(function() {  // setTimeout是異步函數，在調用回調函數時沒有指定匿名函數的this，
      self.showLength();  //由於回調函數沒有指定this，非嚴格模式下默認指向全局對象
  }, 1000);
};

  • p.showLengthAsync函數的調用者是p對象自己，因爲setTimeout不會爲回調函數指定this值。因此在p.showLengthAsync函數中使用變量self將p.showLengthAsync函數調用的this值（即對象p）保存下來

  • 回調函數中才能夠利用變量self訪問到對象p，完成正確調用；

4.箭頭函數

  • 箭頭函數很特殊，箭頭函數中沒有定義this，因此可使用外層函數的this。

Point2D.prototype.showLengthAsync = function() {
  setTimeout( () => this.showLength(), 1000);   // 箭頭函數沒有定義this，能夠訪問外層函數的this
};

call()

函數的call()方法可以指定函數調用時的this值。函數中調用時的this值是能夠改變的

  • 而且，call()方法能夠從第二個參數開始，指定傳入調用函數的參數，以逗號分隔（多個原始形式的參數）

    function Point2D(x, y) {
  this.x = x;
  this.y = y;
}
Point2D.prototype.showLength = function() {
  var length = Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
  console.log(length);
};

var p = new Point2D(1, 1);
console.log(p.showLength());  // ==> 1.4142...   調用p.length方法的是p對象自己，因此this.x和this.y均等於1

var obj = {x: 3, y: 4};
console.log(p.showLength.call(obj));   // ==> 5  使用函數p.showLength的call()方法改變函數調用時this的指向，
                                       //使其指向對象obj，因此this.x=3，this.y=4

function foo() {
  // 使用Array.prototype.slice函數的call()方法指定函數調用時的this指向arguments對象，將其切分爲數組
  var args = Array.prototype.slice.call(arguments);

  console.log(Array.isArray(arguments));  // false
  console.log(Array.isArray(args));   //  true
}

call()的做用：改變當前函數調用時的this值

apply()

函數的apply()方法與call()方法做用徹底一致，只是在調用時傳入的參數有區別：

  • call()方法：第一個參數接收新的this值，後面的參數逗號分隔，逐個排列，傳入調用函數中

  • apply()方法：第一個參數接收新的this值，第二個參數接收一個數組，將數組總體做爲參數傳入調用函數中

    // 定義一個函數，實現一種變換，將傳入其中的函數中參數的順序顛倒
function __reverseArgs__(fn) {
  return function() {
    var args = Array.prototype.slice.call(arguments);
    
    return fn.apply(this, args.reverse());  // 這裏的this表示這個匿名函數的調用者
  };
}
var foo = function() {console.log(Array.from(arguments));};
var foo2 = __reverseArgs__(foo);
foo2(1, 2, 3, 4);

  • 注意return fn.apply(this, args.reverse());中的this。由於__reverseArgs__(fn)函數返回一個新的函數，apply()中的this指向調用這個新函數的對象。

  • foo2接收了__reverseArgs__(foo)返回的新函數，調用foo2(1, 2, 3, 4)時，由於foo2在全局對象下，因此this的值是全局對象。

  • __reverseArgs__(fn)方法應該只改變傳入函數中參數的順序，不改變原來函數調用的做用域。因此使用this將函數的調用改回傳入函數的做用域。

bind()

bind()方法與call()和apply()方法的最大區別在於返回值：call()和apply()都會當即執行，返回結果；而bind()方法會返回一個函數，而且能夠經過bind()向函數中傳遞已經肯定的參數，對於異步調用頗有幫助。

function add(x, y) {
  return x + y;
}
// call()和apply()會當即執行；bind()方法會返回一個函數對象
console.log(add.call(null, 1, 2));   // ==> 3 ，使用call()方法在全局對象下對傳入的參數1,2執行函數
console.log(add.apply(null, [1, 2]));   // ==> 3 apply()方法在全局對象下對傳入的參數1,2執行函數
console.log(add.bind(null, 1, 2));   // ==> function () { [native code] }， 返回一個函數
// 傳入兩個參數
let add1 = add.bind(null, 1, 2);  // bind()方法執行時，將1和2對應傳遞給x,y，返回一個函數。再調用返回的函數時，不用再傳遞參數
console.log(add1());         //  ==> 3  爲傳遞參數，直接調用，使用bind()時傳入的參數值

// 傳入一個參數
let add2 = add.bind(null, 1);   //bind()時只傳遞一個參數1給x，返回一個函數，在調用返回函數時只需炫迪一個參數給y便可
console.log(add2(3));    //  ==> 4  只需傳遞一個參數給y便可

// 不傳遞參數
let add3 = add.bind(null);    //調用bind()時不傳遞參數，返回一個函數，在調用返回函數時要傳遞2個參數
console.log(add3(2, 3));   // ==> 5  須要傳遞兩個參數，與調用原函數沒有區別。。。不建議使用

能夠看出bind()的最大用處在於返回一個函數，而且能夠向函數內傳遞肯定的參數值（在bind()執行時時便已經肯定的參數）。調用返回的函數時，無需再傳入bind()時傳入的參數---實現函數的部分調用

應用場景：相似於setTimeout(fn, 1000);的異步函數，須要一個函數做爲參數，在1s後執行。有時對於已經知道fn調用時傳入的參數值時，即可以使用bind()，先將參數傳遞進去，返回一個函數；等待時間到後，無需再向該函數傳入參數，當即執行便可

function setBodyState(state) {
  document.body.className = state;
}
setBodyState.call(null, 'state1');   // 當即執行setBodyState函數，將document.body.className設置爲'state1'。
                                    // this值爲null表示在全局對象下執行該函數
setTimeout(setBodyState.bind(null, 'state2'), 1500);  // 執行bind()方法，返回一個函數做爲回調函數，而且將須要向它傳遞
                                      //的'state2'做爲參數。1500ms後當即執行返回的函數便可，無需再傳入參數

bind()方法在異步函數中的應用，主要因爲其返回一個函數，而且能夠傳入參數值的特性，能夠減小異步函數調用的部分問題。

高階函數實例

Closure中訪問外部函數的arguments、this、形參和局部變量

// __multi__()抽象一個過程，將傳入的函數進行擴展，使其第一個參數接收類數組
// 調用原來的方法fn對每一個第一個數組參數中的每一個元素執行fn方法
function __multi__(fn) {
  return function(arrayLike, ...args) {
    return Array.from(arrayLike).map(item => fn(item, ...args));
  };
}

function __multi__(fn) {
  return function(arrayLike, ...args) {   // 返回一個函數（建立一個Closure），返回的函數接收夜歌類數組對象和rest參數做爲參數
    return Array.from(arrayLike).map(function(value) {
      return fn(value, ...args);
    });
  };
}

function add(x, y) { return x + y;}
var add2 = __multi__(add);
console.log(add2([1,2,3], 4));  // ==> [5, 6, 7]

1.注意map()方法若是須要返回值，必定要在傳入map()的函數中返回值，由於默認的返回值是undefined`
2.Closure中對於外層函數的局部變量、形參、實參對象arguments和this的訪問問題：

  • __multi__()返回一個函數（建立一個Closure），返回的函數保留對外層函數做用域的訪問能力

  • 但this值和實參對象arguments是根據調用函數時肯定的，若是要在Closure中訪問到調用時的this和arguments對象，須要將其保存在外部函數局部做用域的變量中。

function __multi__(fn) {
  var self = this;
  var outerArgs = arguments;
  return function(arrayLike, ...args) {
    return Array.from(arrayLike).map(function(value) {
      console.log(self);    // 能夠訪問到外層函數的調用者
      console.log(outerArgs);  //能夠訪問到外層函數的實參列表，至關於訪問外層函數的局部變量
      
      console.log(this);   // 訪問到的this值是返回函數的調用者
      console.log(arguments);  // 訪問到的arguments是傳入返回函數的實參
      
      return fn(value, ...args);   // 能夠訪問到外部函數的形參  
    });
  };
}

  • Closure中能夠訪問到外部函數的形參（形參的特性與局部變量相同）

    function __multi__(fn, a = 2) {
  console.log(arguments[0]);
  return function(arrayLike, ...args) {
    return Array.from(arrayLike).map(function(value) {
      console.log(a);    // 能夠訪問到外層函數的形參a
      return fn(value, ...args);   // 能夠訪問到外部函數的形參fn
    });
  };
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程