成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

學(xué)習(xí)JavaScript之this,call,apply

wenhai.he / 478人閱讀

摘要：在全局對(duì)象中調(diào)用，自然讀取的是全局對(duì)象的值構(gòu)造器調(diào)用說(shuō)明作為構(gòu)造器調(diào)用時(shí)，指向返回的這個(gè)對(duì)象。最直觀的表現(xiàn)就是，去看一些優(yōu)秀框架的源代碼時(shí)，不再是被繞的暈乎乎的。

學(xué)習(xí)起因：

在之前的JavaScript學(xué)習(xí)中，this,call,apply總是讓我感到迷惑，但是他們的運(yùn)用又非常的廣泛。遂專門花了一天，來(lái)弄懂JavaScript的this,call,apply。
中途參考的書籍也很多，以《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》為主，《JavaScript高級(jí)程序設(shè)計(jì)》、《你不知道的JavaScript》為輔。這三本書對(duì)我理解this,call,apply都起了很大的幫助。

this

首先，我們先講述this。

在《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》關(guān)于this的描述中，我認(rèn)為有一句話切中了this的核心要點(diǎn)。那就是：

JavaScript的this總是指向一個(gè)對(duì)象

具體到實(shí)際應(yīng)用中，this的指向又可以分為以下四種：

作為對(duì)象的方法調(diào)用

作為普通函數(shù)調(diào)用

構(gòu)造器調(diào)用

apply和call調(diào)用

接下來(lái)我們?nèi)テ饰銮?點(diǎn)，至于第4點(diǎn)的apply和call調(diào)用，會(huì)在call和apply部分詳細(xì)講解。

1.作為對(duì)象的方法調(diào)用

說(shuō)明：作為對(duì)象方法調(diào)用時(shí)，this指向該對(duì)象。
舉例：

/**
 * 1.作為對(duì)象的方法調(diào)用
 *
 * 作為對(duì)象方法調(diào)用時(shí)，this指向該對(duì)象。
 */

var obj = {
  a: 1,
  getA: function() {
    console.log(this === obj);
    console.log(this.a);
  }
};

obj.getA(); // true , 1
2.作為普通函數(shù)調(diào)用

說(shuō)明：作為普通函數(shù)調(diào)用時(shí)，this總是指向全局對(duì)象(瀏覽器中是window)。
舉例：

/**
 * 2.作為普通函數(shù)調(diào)用
 *
 * 不作為對(duì)象屬性調(diào)用時(shí),this必須指向一個(gè)對(duì)象。那就是全局對(duì)象。
 */

window.name = "globalName";

var getName = function() {
  console.log(this.name);
};

getName(); // "globalName"

var myObject = {
  name: "ObjectName",
  getName: function() {
    console.log(this.name)
  }
};

myObject.getName(); // "ObjectName"

// 這里實(shí)質(zhì)上是把function() {console.log(this.name)}
// 這句話賦值給了theName。thisName在全局對(duì)象中調(diào)用，自然讀取的是全局對(duì)象的name值
var theName = myObject.getName;

theName(); // "globalName"
3.構(gòu)造器調(diào)用

說(shuō)明：作為構(gòu)造器調(diào)用時(shí)，this指向返回的這個(gè)對(duì)象。
舉例：

/**
 * 3.作為構(gòu)造器調(diào)用
 * 
 * 作為構(gòu)造器調(diào)用時(shí)，this指向返回的這個(gè)對(duì)象。
 */

var myClass = function() {
  this.name = "Lxxyx";
};

var obj = new myClass();

console.log(obj.name); // Lxxyx
console.log(obj) // myClass {name: "Lxxyx"}

但是如果構(gòu)造函數(shù)中手動(dòng)指定了return其它對(duì)象，那么this將不起作用。
如果return的是別的數(shù)據(jù)類型，則沒(méi)有問(wèn)題。

var myClass = function() {
  this.name = "Lxxyx";
  // 加入return時(shí)，則返回的是別的對(duì)象。this不起作用。
  return {
    name:"ReturnOthers"
  }
};

var obj = new myClass();
console.log(obj.name); // ReturnOthers
Call和Apply

Call和Apply的用途一樣。都是用來(lái)指定函數(shù)體內(nèi)this的指向。

Call和Apply的區(qū)別

Call：第一個(gè)參數(shù)為this的指向，要傳給函數(shù)的參數(shù)得一個(gè)一個(gè)的輸入。
Apply：第一個(gè)參數(shù)為this的指向，第二個(gè)參數(shù)為數(shù)組，一次性把所有參數(shù)傳入。

如果第一個(gè)參數(shù)為null,則this指向宿主環(huán)境，在瀏覽器中則是window。（多謝評(píng)論中一波不是一波的指正）

1.改變this指向

說(shuō)明：這是call和apply最常用的用途了。用于改變函數(shù)體內(nèi)this的指向。
舉例：

var name = "GlobalName"

var func = function() {
  console.log(this.name)
};

func(); // "GlobalName"

var obj = {
  name: "Lxxyx",
  getName: function() {
    console.log(this.name)
  }
};

obj.getName.apply(window) // "GlobalName" 將this指向window
func.apply(obj) // "Lxxyx" 將this指向obj
2.借用其它對(duì)象的方法

這兒，我們先以一個(gè)立即執(zhí)行匿名函數(shù)做開(kāi)頭：

(function(a, b) {
  console.log(arguments) // 1,2
  // 調(diào)用Array的原型方法
  Array.prototype.push.call(arguments, 3);
  console.log(arguments) // 1,2,3
})(1,2)

函數(shù)具有arguments屬性，而arguments是一個(gè)類數(shù)組。
但是arguments是不能直接調(diào)用數(shù)組的方法的，所以我們要用call或者apply來(lái)調(diào)用Array對(duì)象的原型方法。
原理也很容易理解，比如剛才調(diào)用的是push方法，而push方法在谷歌的v8引擎中，源代碼是這樣的：

function ArrayPush() {
  var n = TO_UINT32(this.length); // 被push對(duì)象的長(zhǎng)度
  var m = % _ArgumentsLength(); // push的參數(shù)個(gè)數(shù)
  for (var i = 0; i < m; i++) {
    this[i + n] = % _Arguments(i); // 復(fù)制元素
  }
  this.length = n + m; //修正length屬性
  return this.length;
}

它只與this有關(guān)，所以只要是類數(shù)組對(duì)象，都可以調(diào)用相關(guān)方法去處理。

這部分內(nèi)容比較復(fù)雜，再加上自己水平也不太夠。所以推薦有條件的同學(xué)去購(gòu)買相關(guān)書籍，或者等我的后續(xù)博客文章。

感想

通過(guò)對(duì)這部分的學(xué)習(xí)，算是加深了對(duì)JavaScript的理解。最直觀的表現(xiàn)就是，去看一些優(yōu)秀框架的源代碼時(shí)，不再是被this,call,apply,bind繞的暈乎乎的。還是很開(kāi)心的~

下一段時(shí)間，準(zhǔn)備深入探索一下日常學(xué)習(xí)和使用的CSS。畢竟JavaScript學(xué)了，HTML和CSS也不能落下。

前端路漫漫，且行且歌。

最后附上本人博客地址和原文鏈接，希望能與各位多多交流。

Lxxyx的前端樂(lè)園
原文鏈接：寒假前端學(xué)習(xí)(7)——學(xué)習(xí)JavaScript之this,call,apply

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78587.html

相關(guān)文章

  • 深入淺出JavaScript之call()、apply()方法

    摘要：的作用在中，方法和方法都是為了改變函數(shù)運(yùn)行時(shí)上下文而存在的，換句話說(shuō)就是為了改變函數(shù)體內(nèi)部的指向。歡迎前端大牛糾正錯(cuò)誤，如有錯(cuò)誤我會(huì)及時(shí)改正。 寫在前面： 隔了很長(zhǎng)時(shí)間了，也不知道寫點(diǎn)什么。最近一直在研究ES6，一直想寫出來(lái)的文章能對(duì)初學(xué)者或者是在學(xué)習(xí)JS路上有所幫助的。這就是我的初衷。 call、apply的作用 在JavaScript中，call()方法和apply()方法都是為了...

    Cympros 評(píng)論0 收藏0

  • javascript 基礎(chǔ)之 call, apply, bind

    摘要：系統(tǒng)，扎實(shí)的語(yǔ)言基礎(chǔ)是一個(gè)優(yōu)秀的前端工程師必須具備的。第一個(gè)參數(shù)為調(diào)用函數(shù)時(shí)的指向，隨后的參數(shù)則作為函數(shù)的參數(shù)并調(diào)用，也就是。和的區(qū)別只有一個(gè)，就是它只有兩個(gè)參數(shù)，而且第二個(gè)參數(shù)為調(diào)用函數(shù)時(shí)的參數(shù)構(gòu)成的數(shù)組。 系統(tǒng)，扎實(shí)的 javascript 語(yǔ)言基礎(chǔ)是一個(gè)優(yōu)秀的前端工程師必須具備的。在看了一些關(guān)于 call，apply，bind 的文章后，我還是打算寫下這篇總結(jié)，原因其實(shí)有好幾個(gè)。...

    xeblog 評(píng)論0 收藏0

  • JavaScript進(jìn)階之模擬new Object過(guò)程

    摘要：后續(xù)我將推出進(jìn)階系列，一方面是一個(gè)監(jiān)督自己學(xué)習(xí)的一個(gè)過(guò)程，另一方面也會(huì)給看到的童鞋一些啟發(fā)。第二步鏈接到原型中現(xiàn)在把構(gòu)造函數(shù)和參數(shù)都打印出來(lái)了。 原文：https://zhehuaxuan.github.io/... 作者：zhehuaxuan 寫在前面的話 前端的入門相對(duì)簡(jiǎn)單，相對(duì)于其他方向天花板可能會(huì)相對(duì)較低。但是在市場(chǎng)上一個(gè)優(yōu)秀的前端依舊是很搶手的。能夠站在金字塔上的人往往寥寥...

    chengtao1633 評(píng)論0 收藏0

  • 小菊花課堂之JavaScript關(guān)于this

    摘要：另外，的綁定和函數(shù)聲明的位置沒(méi)有任何關(guān)系，之取決于函數(shù)的調(diào)用方式。請(qǐng)看下面代碼這樣，我們就可以在調(diào)用的時(shí)候強(qiáng)制把它的綁定到上綁定在傳統(tǒng)的面向類語(yǔ)言中，使用初始化類時(shí)會(huì)調(diào)用類中的構(gòu)造函數(shù)。 關(guān)于this 上一章我們講了關(guān)于作用域和閉包的相關(guān)知識(shí)，現(xiàn)在開(kāi)始新一輪的學(xué)習(xí)，那就是JavaScript中最復(fù)雜的機(jī)制之一---this關(guān)鍵字。它是一個(gè)很特別的關(guān)鍵字，被自動(dòng)定義在所有函數(shù)的作用域中。...

    CHENGKANG 評(píng)論0 收藏0

  • 從Vue源碼學(xué)習(xí)JavaScript之this instanceof Vue

    摘要：函數(shù)的調(diào)用有以下幾種方式作為對(duì)象方法調(diào)用，作為函數(shù)調(diào)用，作為構(gòu)造函數(shù)調(diào)用，和使用或調(diào)用。并且規(guī)范中說(shuō)明，只有對(duì)象實(shí)現(xiàn)了方法。使用了回到上面作為構(gòu)造函數(shù)調(diào)用第一步創(chuàng)建一個(gè)空的對(duì)象，。第二步鏈接該對(duì)象即設(shè)置該對(duì)象的構(gòu)造函數(shù)到另一個(gè)對(duì)象，即。 在src/core/instance/index.js中 if (process.env.NODE_ENV !== production && !(t...

    付永剛 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<