JavaScript面向對象中的this關鍵字個人分享

nevermind 發布于2019-08-23 11:25 / 2023人閱讀

摘要：關鍵字關鍵字描述本身沒有任何含義但它也可以代表任何含義被自動定義在所有的函數作用域中都有一個共同點它總是要返回一個對象指向哪個對象不取決于定義在哪它取決于調用位置注意建議搞不明白時盡量不要使用否則會很混亂一定要理解之后使用的基本用法表示在函

this關鍵字 this關鍵字描述

this本身沒有任何含義,但它也可以代表任何含義

this被自動定義在所有的"函數"作用域中

this都有一個共同點,它總是要返回一個對象

this指向哪個對象,不取決于定義在哪,它取決于調用位置

注意: 建議搞不明白時盡量不要使用否則會很混亂,一定要理解之后使用

this的基本用法

表示在函數中使用this，在調用該函數時，this沒有具體的指向目標，會默認為this指向全局對象

示例代碼:

// 定義一個全局變量
var v = 100;
// this經常被定義在函數的作用域中
function fn() {
    // this總是要返回一個對象
    console.error(this.v);// this指向哪個對象,不取決于函數定義的位置
}
// this指向哪個對象,取決于調用的位置
// fn();// 函數的調用


// 定義一個對象,將fn函數作為obj對象的方法
var obj = {
    v : 200,
    f : fn
};
// obj.f();
console.error(this.v);

代碼分析圖:

隱式綁定丟失

隱式綁定丟失需要注意的是: 將一個指定對象中的指定方法賦值給一個全局變量，在調用全局變量時，this將從原本指向具體對象，變成指向全局對象

表示一個函數被另一對象所擁有或包含，從形成的上下文關系，這時this會指向該對象

示例代碼:

// 定義一個全局變量
var v = 100;
// this經常被定義在函數的作用域中
function fn() {
    // this總是要返回一個對象
    console.error(this.v);// this指向哪個對象,不取決于函數定義的位置
}
// this指向哪個對象,取決于調用的位置
// fn();// 函數的調用


// 定義一個對象,將fn函數作為obj對象的方法
var obj = {
    v : 200,
    f : fn
};
// obj.f();
console.error(this.v);

代碼分析圖:

顯示綁定

用于處理隱式綁定丟失的一種方法

在調用函數時就明確this所指向的對象

示例代碼:

// 定義一個全局變量
var v = 100;
// 定義一個函數
function fn() {
    console.log(this.v);
}
// 定義一個對象
var obj = {
    v : 200,
    f : fn// 對象的f()方法指向fn()函數
};
// 定義一個全局變量,并被賦值為對象obj的f()方法
var fun = obj.f;
// 將fun作為一個函數進行調用
fun.apply(obj);

new綁定

通過構造函數所創建的對象，會成為該構造函數中的this所指向的對象

示例代碼:

function Hero(name) {
this.name = name;
}
// this取決于函數調用的位置
var hero1 = new Hero("花木蘭");

var hero2 = new Hero("秦始皇");

console.log(hero1.name);// 調用結果為 花木蘭

被忽略的this

在使用apply()方法或call()方法來調用函數時，將null或undefined做為this綁定的對象傳入時，會被忽略，并將this的綁定方式變成默認綁定

示例代碼:

/* 定義函數 */
function fn() {
    console.log(this.v);
}
/* 定義全局變量 */
var v = 100;

fn.call(null);// 調用結果為 undefined （在瀏覽器環境中會顯示 100 全局變量）

間接引用

表示將this從隱式綁定或顯示綁定（有明確的指向對象）變成默認綁定（指向全局對象）

示例代碼:

/* 定義一個函數 */
function foo() {
    console.log(this.a);
}
/* 定義一個全局變量 */
var a = 2;
/* 定義一個對象 */
var o = {
    a : 3,
    foo : foo
};
o.foo();// 調用結果為 3
var p = {a : 4};

// p.foo = o.foo;
// p.foo();// 4

(p.foo = o.foo)();// 調用結果為 undefined（瀏覽器環境中會顯示 2 全局變量）

GPU云服務器云服務器 javaScript中的this javascript 面向對象 javascript面向對象 javascript面向對象編程

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

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

JavaScript中的面向對象個人分享

摘要：面向對象面向對象的概念所謂面向對象就用抽象方式創建基于顯示世界模型的一種變成模式面向對象編程可以看做是使用一系列對象互相協作的軟件設計備注面向對象全稱簡稱面向對象編程的主要三個特征是封裝所謂封裝就是按要求使用得到對象的結果相關數據用于存儲面向對象面向對象的概念所謂面向對象就用抽象方式創建基于顯示世界模型的一種變成模式,面向對象編程可以看做是使用一系列對象互相協作的軟件設計備注...

DirtyMind 2019-08-26 12:11 評論0 收藏0
JavaScript面向對象中的原型個人分享

摘要：原型原型是什么所謂原型就是類型對象的一個屬性在函數定義時就包含了屬性它的初始值是以個空對象在中并沒有定義函數的原型類型所以原型可以是任何類型原型是用于保存對象的共享屬性和方法的原型的屬性和方法并不會影響函數本身的屬性和方法示例代碼類型的屬性原型原型是什么所謂原型(Prototype)就是Function類型對象的一個屬性在函數定義時就包含了prototype屬性,它的初始值是...

pakolagij 2019-08-26 12:14 評論0 收藏0
JavaScript面向對象中的繼承個人分享

摘要：繼承原型鏈所謂言行鏈就是如果構造函數或對象的原型指向構造函數或對象的原型再指向構造函數或對象以此類推最終的構造函數或對象的原鄉指向的原型由此形成一條鏈狀結構被稱之為原型鏈示例代碼原型鏈通過構造函數創建對象將的原型指向對象通過構造函數創建對象繼承原型鏈所謂言行鏈就是如果構造函數或對象A,A的原型指向構造函數或對象B,B的原型再指向構造函數或對象C,以此類推,最終的構造函數或對象的原...

Coly 2019-08-26 12:14 評論0 收藏0
前端開發周報: CSS 布局方式與JavaScript數據結構和算法

摘要：如果沒有學習過計算機科學的程序員，當我們在處理一些問題時，比較熟悉的數據結構就是數組，數組無疑是一個很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見 CSS 布局方式詳見：一些常見的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...

huhud 2019-08-20 18:59 評論0 收藏0