javascript基礎：this關鍵字

LeoHsiun 發布于2019-08-19 18:20 / 1729人閱讀

摘要：它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用類似的還有。總結關鍵字就是，誰調用我，我就指向誰。注意由于已經被定義為函數內的一個變量。因此通過關鍵字定義或者將聲明為一個形式參數，都將導致原生的不會被創建。

題目

封裝函數 f，使 f 的 this 指向指定的對象。

輸入例子

bindThis(function(a, b) {
    return this.test + a + b；
}, {test: 1})(2, 3)；

輸出例子

分析 題目拆解

該題目的要求是：封裝一個函數bindThis，該函數有兩個參數，第一個參數是一個內部有使用this指針的函數f，第二個參數是一個對象obj，執行bindThis之后，返回一個函數，該函數里面的this就被綁定到obj上面。。。好吧，我承認我剛看到這個時，也很暈，但是如果我把它寫成下面的樣子，是不是就感覺好多了呢？

function f(a, b) {
    return this.test + a + b；
}

function bindThis(f, obj) {
    //你實現的部分
}

//執行函數
var a = bindThis(f,{test:1});
a(2,3);

什么是this

this是Javascript語言的一個關鍵字。它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用(類似的還有arguments)。具體的大家可以看看阮一峰的Javascript的this用法
和變量不同，關鍵字this沒有作用域的限制，嵌套的函數不會從調用它的函數中繼承this。
簡單的將this的指向分為四種情況：

函數調用

這是函數的最通常用法，屬于全局性調用，其this的值不是全局對象Global（非嚴格模式下）就是undefined（嚴格模式下）。

對象方法調用

函數還可以作為某個對象的方法調用，這時this就指這個上級對象.

構造函數調用

所謂構造函數，就是通過這個函數生成一個新對象（object）。這時，this就指這個新對象。

bind apply call

apply()是函數對象的一個方法，它的作用是改變函數的調用對象，它的第一個參數就表示改變后的調用這個函數的對象。因此，this指的就是這第一個參數。bind,call類似。

總結：this關鍵字就是，誰調用我，我就指向誰。

解決方法

首先，看到this的綁定這幾個字，你是不想條件反射的想起了javascript的三劍客:bind apply call?

bind apply call的區別

call 和 apply 都是為了改變某個函數運行時的 context 即上下文而存在的，換句話說，就是為了改變函數體內部 this 的指向。因為 JavaScript 的函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念。

相同點：

都可以為函數綁定this。

不同點：

call和apply基本的區別：參數不同。apply() 接收兩個參數，第一個是綁定 this 的值，第二個是一個參數數組。而 call() 呢，它的第一個參數也是綁定給 this 的值，但是后面接受的是不定參數，而不再是一個數組，也就是說你可以像平時給函數傳參那樣把這些參數一個一個傳遞。

bind的區別：創建一個新的函數。具體的可以看看這篇文章理解 Javascript 的 Function.prototype.bind

解決方法一：使用bind()

下面的例子是其中一個解決方法，同時也說明了bind()方法是創建了一個新的函數。

function f(a, b) {
    return this.test + a + b;
}

function bindThis(f, obj) {
    //你實現的部分
    return f.bind(obj);
}

//執行函數
var a = bindThis(f,{test:1});
console.log(a(2,3));
console.log(f(2,3));

輸出結果：

6
NaN

解決方法二：使用apply()

function bindThis(f, obj) {
    //你實現的部分
    return function () {
        return f.apply(obj, arguments);
    };
}

這里使用一個函數包裝了一下apply方法，然后返回該函數。

arguments是JavaScript 中每個函數內都能訪問一個特別變量 arguments。這個變量維護著所有傳遞到這個函數中的參數列表。

注意: 由于 arguments 已經被定義為函數內的一個變量。因此通過 var 關鍵字定義 arguments 或者將 arguments 聲明為一個形式參數，都將導致原生的 arguments 不會被創建。

arguments 變量不是一個數組（Array）。盡管在語法上它有數組相關的屬性 length，但它不從 Array.prototype 繼承，實際上它是一個對象（Object）。

解決方法三：使用call()

和apply()類似，僅參數的傳入方式不同。

function bindThis(f, obj) {
    //你實現的部分
    return function (a,b) {
        return f.call(obj, a,b);
    };
}

總結

該題目主要考察的是this關鍵字及改變this指向的方法，再下才疏學淺，只能找到這幾個方法了，但是鑒于javascript這門語言的靈活性，我老感覺應該是還有其他的方法的，希望各位知道了能夠不吝賜教。

云服務器 GPU云服務器 jsp關鍵字this javascript的this javaScript中的this javascript中this詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79474.html

JavaScript基礎心法——this

摘要：原文地址基礎心法歡迎。作為一個構造函數被綁定到正在構造的新對象。通過構造函數創建一個對象其實執行這樣幾個步驟創建新對象將指向這個對象給對象賦值屬性方法返回所以就是指向創建的這個對象上。原文地址：JavaScript基礎心法——this 歡迎star。如果有錯誤的地方歡迎指正。看看這個有著深不可測的魔力的this到底是個什么玩意兒 ~ 什么是this 在傳統面向對象的語言中，比如...

hover_lew 2019-08-22 11:11 評論0 收藏0
快速掌握JavaScript面試基礎知識(二)

摘要：第一部分請點擊快速掌握面試基礎知識一閉包閉包由一個函數以及該函數定義是所在的環境組成。當匿名函數執行的時候，的值為。這個問題可以改用后面會介紹方法來解決，通過對每一個匿名函數構建獨立的外部作用域來實現。譯者按：總結了大量JavaScript基本知識點，很有用！原文: The Definitive JavaScript Handbook for your next develope...

fyber 2019-08-26 11:43 評論0 收藏0
快速掌握JavaScript面試基礎知識(三)

摘要：第一部分請點擊快速掌握面試基礎知識一關鍵字如果使用關鍵字來調用函數式很特別的形式。該對象默認包含了指向原構造函數的屬性。接下來通過例子來幫助理解屬性包含了構造函數以及構造函數中在上定義的屬性。也就是說，的回調函數后執行。譯者按：總結了大量JavaScript基本知識點，很有用！原文: The Definitive JavaScript Handbook for your next...

qieangel2013 2019-08-26 11:43 評論0 收藏0
#yyds干貨盤點# 前端基礎知識面試集錦3

摘要：當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體如何實現繼承構造繼承原型繼承實例繼承拷貝繼承原型機制或和方法去實現較簡單，建議使用構造函數與原型混合方式。它是基于的一個子集。 JavaScript介紹js的基本數據類型。Undefined、Null、Boolean、Number、Stri...

番茄西紅柿 2021-11-22 15:29 評論0 收藏2637
Javascript基礎知識（一）

摘要：它可以接收兩個參數，表示要查找的子字符串，表示查找的開始位置，省略的話則從開始位置進行檢索。它會返回第一個匹配的子字符串的起始位置，如果沒有匹配的，則返回。返回一個布爾值，表示指定的對象是否在本對象的原型鏈中。前言前端開發最基本的就是HTML + CSS + JS了，剛入行時聽到的介紹就是，寫頁面亦如造房子，HTML為搭戶型，CSS是房屋裝飾，JS則好比是水電安裝，是最后的功能了。...

MrZONT 2019-08-23 16:30 評論0 收藏0