【js】《JavaScript設計模式與開發實踐》——this的指向

王晗發布于2019-08-26 11:51 / 508人閱讀

摘要：區分構造器是否顯式地返回一個類型的對象例如不顯式返回對象小闊愛寶批龍小闊愛以及顯式返回對象小闊愛寶批龍寶批龍或調用跟普通函數相比，這種方式可以動態改變傳入函數的例如小闊愛寶批龍小闊愛寶批龍

在js中，this總是指向一個對象，具體要看那個對象在運行時函數的執行環境（動態綁定），即“函數在誰那被調用，this就指向誰”。

1、在對象的方法內調用——指向該對象

例如

var obj = {
    name: "小闊愛",
    getName: function () {
        console.log("this === obj?", this === obj);
        console.log("this.name=", this.name);
    }
};
obj.getName(); // "小闊愛"

2、在普通方法內調用——指向全局對象window

例如

window.name = "小闊愛";
var getName = function () {
    return this.name;
};
console.log("getName=", getName()); // 小闊愛

或者

window.name = "小闊愛";
var obj = {
    name: "寶批龍",
    getName: function () {
        return this.name;
    }
};
var getName = obj.getName;
console.log("getName=", getName()); // 小闊愛

或者——當函數里面嵌套函數時，指向window

window.id = "xiaokuoai";
document.getElementById("baopilong").onclick = function () {
    console.log("this.id=", this.id); // "baopilong"
    var newFun = function () {
        console.log("this.id=", this.id); // "xiaokuoai"
    }
    newFun();
};

注意：在ES5的strict模式下，普通函數內的this被規定為不會指向window，而是undefined

例如

function func () {
    "user strict"
    console.log("this=", this); // undefined
}
func()

3、構造器調用（被new運算符調用）

當函數被new運算符調用時，該函數總會返回一個對象。

例如（一般情況）

var obj = function () {
    this.name = "小闊愛";
};
var newObj = new obj();
console.log("newObj.name=", newObj.name); // "小闊愛"

特殊情況：(函數有返回值的情況)
如果返回值是一個對象，那么this指向的就是那個返回的對象，如果返回值不是一個對象那么this還是指向函數的實例。（區分構造器是否顯式地返回一個object類型的對象）

例如（不顯式返回object對象）

var obj = function () {
    this.name = "小闊愛";
    return "寶批龍";
};
var newObj = new obj();
console.log("newObj.name=", newObj.name); // "小闊愛"

以及（顯式返回object對象）

var obj = function () {
    this.name = "小闊愛";
    return {
        name: "寶批龍"
    };
};
var newObj = new obj();
console.log("newObj.name=", newObj.name); // "寶批龍"

4、call或apply調用

跟普通函數相比，這種方式可以動態改變傳入函數的this

例如

var obj1 = {
    name: "小闊愛",
    getName: function () {
        return this.name;
    }
};
var obj2 = {
    name: "寶批龍"
};
console.log("obj1.getName=", obj1.getName()); // "小闊愛"
console.log("obj1.getName.call(obj2)=", obj1.getName.call(obj2)); // "寶批龍"

GPU云服務器云服務器 this的指向 javascript基礎與實踐教程 javascript的this 改變this指向

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

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

javascript設計模式與開發實踐（二）- 封裝和原型模式

摘要：對象會記住它的原型給對象提供了一個名為的隱藏屬性，某個對象的屬性默認會指向它的構造器的原型對象，即。我們通過代碼來驗證再來實際上，就是對象跟對象構造器的原型聯系起來的紐帶切記這句話，對未來理解原型鏈很有幫助。封裝封裝數據在許多語言的對象系統中，封裝數據是由語法解析來實現的，這些語言也許提供了 private、public、protected 等關鍵字來提供不同的訪問權限。例如：j...

luxixing 2019-08-22 15:05 評論0 收藏0
JavaScript設計模式與開發實踐 | 02 - this、call和apply

摘要：構造器的外表跟普通函數一樣，他們的區別在于被調用的方式。即，使用運算符創建對象時，就是將函數當作構造器調用。本節內容為設計模式與開發實踐第二章筆記。 this JavaScript的this總是指向一個對象，至于指向哪個對象，是在運行時基于函數的執行環境的動態綁定的，而非函數被聲明時的環境。 this的指向 this的指向大致可以分為以下4類：作為對象的方法調用作為普通函數調用 ...

darryrzhong 2019-08-21 10:45 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

Lowky 2019-08-22 11:22 評論0 收藏0