影響JavaScript中this指向的幾種函數調用方法

Drinkey 發布于2019-08-23 13:04 / 1785人閱讀

摘要：前言初學總會對指向感到疑惑，想要深入學習，必須先理清楚和相關的幾個概念。中總是指向一個對象，但具體指向誰是在運行時根據函數執行環境動態綁定的，而并非函數被聲明時的環境。除去不常用的和的情況，具體到實際應用中，指向大致可以分為以下種。

前言

初學javascript總會對this指向感到疑惑，想要深入學習javascript，必須先理清楚和this相關的幾個概念。javascript中this總是指向一個對象，但具體指向誰是在運行時根據函數執行環境動態綁定的，而并非函數被聲明時的環境。除去不常用的with和eval的情況，具體到實際應用中，this指向大致可以分為以下4種。

作為對象的方法調用

當函數作為對象的方法被調用時，this指向該對象：

var person = {
  name: "twy",
  getName: function() {
    console.info(this === person);  // 輸出true
    console.info(this.name);     // 輸出twy
  }
}
person.getName();

作為普通函數調用

當函數作為普通的函數被調用時，非嚴格模式下this指向全局對象：

function getName(){
  // 非嚴格模式
  console.info(this === window); // 瀏覽器環境下輸出true
}
getName();

嚴格模式下this為undefined：

function getName(){
  // 嚴格模式
  "use strict"
  console.info(this === window); // 輸出false
}
getName();

構造器調用

當new一個對象時，構造器里的this指向new出來的這個對象：

function person(){
  // 構造函數
  this.color = "white";
}
var boy = new person();
console.info(boy.color);  // 輸出white

call或apply調用

用 Function.prototype.apply 或 Function.prototype.call 可以動態改變傳入函數的this指向：

// 聲明一個父親對象，getName方法返回父親的名字
var father = {
  name: "twy",
  getName: function(){
    return this.name;
  }
}
// 生命一個兒子對象，但是沒有返回名字的功能
var child = {
  name: "chy"
}
console.info(father.getName()); // 輸出twy

// 使用call或apply將father.getName函數里this指向child
console.info(father.getName.call(child)); // 輸出chy
console.info(father.getName.apply(child)); // 輸出chy

下一篇文章我將重點介紹call和apply。

最后

將this理解透徹，是一個jser必須要做的事情。

云服務器 GPU云服務器 js緩存的幾種方法 javascript中this詳解最基本的幾種 html的幾種輪播

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

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

javascript 面向對象(實現繼承的幾種方式)

摘要：老明調用了從原型中繼承來的方法繼承到了當前對象的原型中調用了從原型中擴展來的方法構造繼承基本思想借用構造函數的基本思想就是利用或者把父類中通過指定的屬性和方法復制借用到子類創建的實例中。 1、原型鏈繼承核心：將父類的實例作為子類的原型缺點：父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了 function Person (name) { ...

liujs 2019-08-23 16:41 評論0 收藏0
JavaScript繼承的幾種方式

摘要：組合方式繼承終極版工商建設開心能分清是孩子還是父輩二狗的構造函數已指向圖示關鍵代碼創建對象的方法就是用原型鏈來連接的。也讓二狗有了確定的歸屬。一、繼承原理原型鏈不知道什么是原型鏈？來讀幾個關鍵詞：哥歐構構造函數構造函數構造函數實例實例實例原型對象原型對象原型對象 prototype prototype prototype __proto__ __pro...

SegmentFault 2019-08-22 18:02 評論0 收藏0
JavaScript 嚴格模式下this的幾種指向

摘要：前言曾經被中的弄暈了，今天整理總結一下在嚴格模式下的幾種指向。嚴格模式構造函數中的事件處理函數中的在嚴格模式下，在事件處理函數中，指向觸發事件的目標對象。前言曾經被 JavaScript 中的 this 弄暈了，今天整理總結一下在嚴格模式下 this 的幾種指向。 1. 全局作用域中的this 在嚴格模式下，在全局作用域中，this指向window對象 use stric...

smallStone 2019-08-21 15:59 評論0 收藏0
關于JavaScript函數調用的幾種模式

摘要：函數的調用有五種模式方法調用模式，函數調用模式，構造器調用模式，調用模式以及回調模式，下面分別對這幾種模式進行說明。構造器調用模式構造函數的調用方式被稱為構造器調用模式，這是模擬類繼承式語言的一種調用方式。函數的調用有五種模式：方法調用模式，函數調用模式，構造器調用模式，apply/call調用模式以及回調模式，下面分別對這幾種模式進行說明。 1.函數調用與方法調用模式： 1.1 聲...

鄒強 2019-08-23 13:45 評論0 收藏0
JavaScript知識點總結

摘要：參與任何數值計算的結構都是，而且。。面向人類的理性事物，而不是機器信號。達到無刷新效果。的工作原理總是指向一個對象，具體是運行時基于函數的執行環境動態綁定的，而非函數被聲明時的環境。原型對象上有一個屬性，該屬性指向的就是構造函數。 1.JS面向對象的理解面向對象的三大特點：繼承、封裝、多態 1、JS中通過prototype實現原型繼承 2、JS對象可以通過對象冒充，實現多重繼承， 3...

sean 2019-08-22 13:51 評論0 收藏0