1. 程式人生 > >js this的應用場景

js this的應用場景

.JavaScript 中的 this 含義要豐富得多,它可以是全域性物件、當前物件或者任意物件,這完全取決於函式的呼叫方式。JavaScript 中函式的呼叫有以下幾種方式:
作為物件方法呼叫
作為函式呼叫
作為建構函式呼叫
使用 apply 或 call 呼叫
下面我們將按照呼叫方式的不同,分別討論 this 的含義。
1作為物件方法呼叫
在 JavaScript 中,函式也是物件,因此函式可以作為一個物件的屬性,此時該函式被稱為該物件的方法,在使用這種呼叫方式時,this 被自然繫結到該物件

var test = {
    a:0,
    b:0
    get:function
(){
return this.a; } }

2.作為函式呼叫
函式也可以直接被呼叫,此時 this 繫結到全域性物件。在瀏覽器中,window 就是該全域性物件。比如下面的例子:函式被呼叫時,this 被繫結到全域性物件,接下來執行賦值語句,相當於隱式的聲明瞭一個全域性變數,這顯然不是呼叫者希望的。

 function makeNoSense(x) { 
 this.x = x; 
 } 

3.作為建構函式呼叫
javaScript 支援面向物件式程式設計,與主流的面向物件式程式語言不同,JavaScript 並沒有類(class)的概念,而是使用基於原型(prototype)的繼承方式。相應的,JavaScript 中的建構函式也很特殊,如果不使用 new 呼叫,則和普通函式一樣。作為又一項約定俗成的準則,建構函式以大寫字母開頭,提醒呼叫者使用正確的方式呼叫。如果呼叫正確,this 繫結到新建立的物件上。

function Point(x, y){ 
    this.x = x; 
    this.y = y; 
 }

於內部函式,即宣告在另外一個函式體內的函式,這種繫結到全域性物件的方式會產生另外一個問題。我們仍然以前面提到的 point 物件為例,這次我們希望在 moveTo 方法內定義兩個函式,分別將 x,y 座標進行平移。結果可能出乎大家意料,不僅 point 物件沒有移動,反而多出兩個全域性變數 x,y。

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
     // 內部函式
     var moveX = function
(x) {
this.x = x;//this 繫結到了哪裡? }; // 內部函式 var moveY = function(y) { this.y = y;//this 繫結到了哪裡? }; moveX(x); moveY(y); } }; point.moveTo(1, 1); point.x; //==>0 point.y; //==>0 x; //==>1 y; //==>1

這屬於 JavaScript 的設計缺陷,正確的設計方式是內部函式的 this 應該繫結到其外層函式對應的物件上,為了規避這一設計缺陷,聰明的 JavaScript 程式設計師想出了變數替代的方法,約定俗成,該變數一般被命名為 that。

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
      var that = this; 
     // 內部函式
     var moveX = function(x) { 
     that.x = x; 
     }; 
     // 內部函式
     var moveY = function(y) { 
     that.y = y; 
     } 
     moveX(x); 
     moveY(y); 
     } 
 }; 
 point.moveTo(1, 1); 
 point.x; //==>1 
 point.y; //==>1

4.在call或者apply中呼叫
讓我們再一次重申,在 JavaScript 中函式也是物件,物件則有方法,apply 和 call 就是函式物件的方法。這兩個方法異常強大,他們允許切換函式執行的上下文環境(context),即 this 繫結的物件。很多 JavaScript 中的技巧以及類庫都用到了該方法。讓我們看一個具體的例子:

 function Point(x, y){ 
    this.x = x; 
    this.y = y; 
    this.moveTo = function(x, y){ 
        this.x = x; 
        this.y = y; 
    } 
 } 

 var p1 = new Point(0, 0); 
 var p2 = {x: 0, y: 0}; 
 p1.moveTo(1, 1); 
 p1.moveTo.apply(p2, [10, 10])

相關推薦

js this應用場景

.JavaScript 中的 this 含義要豐富得多,它可以是全域性物件、當前物件或者任意物件,這完全取決於函式的呼叫方式。JavaScript 中函式的呼叫有以下幾種方式: 作為物件方法呼叫 作為函式呼叫 作為建構函式呼叫 使用 apply 或 ca

js閉包之應用場景

泄露 應用場景 bject 作用 nbsp 方法 函數表達式 激活 參數 閉包的解釋 一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。閉包是指有權訪問另一個函數作用域的變量的函數 在javascript中,只有函數內部的子

this的典型應用場景

1)、在html元素事件屬性中使用,如: <input type=”button” onclick=”showInfo(this);” value=”點選一下”/> (2)、建構函式 function Animal(name, color) {   this

this應用詳解-js原生

    學習記錄,以防遺忘,適合新手解惑。老鳥避讓!   在微信H5的開發中,很多頁面都是簡單的一個模型item在加上很多很多資料組成起來的。例如微信朋友圈,仔細觀察,他的一個基本模型就是 “頭像圖片 + 使用者暱稱 + 一段文字 + 一張或大於一張小於九張的圖片 + startTime ”。總

JS閉包的理解及常見應用場景

function showContent(content){ document.getElementById('info').innerHTML = content; }; function setContent(){ var infoArr = [

JS跨域方案JSONP與CORS的各自優缺點以及應用場景

從問題來看,相信題主已經瞭解JSONP與CORS的基本知識,回答也是建立在此基礎上。首先明確:JSONP與CORS的使用目的相同,並且都需要服務端和客戶端同時支援,雖然功能上講CORS更為強大,但是需要根據應用場景選擇使用哪一個。JSONP(json with padding 填充式json),利用了使用sr

JS系列1---節流,去抖(防抖)應用場景:intput請求優化,頁面監聽

  在專案開發過程中經常遇到在input的change事件中發起請求,將使用者最新輸入的字元作為data傳給後臺,但是如果使用者的輸入頻率過高,或者使用者輸入的字元還未拼成一個完整的字詞,這時候發起請求會浪費網路資源,使頁面卡頓。   這時候我們就用到了函式去抖(debounce)和函式節流(throttl

Oracle442個應用場景---------PL/SQL基礎

筆記 有時 統計函數 upper rman 函數 分支語句 數據庫 any ----------------------------------------------------------------------------------- 備份和恢復數據庫略過。在

如何選擇版本控制系統之二---Git的研發應用場景

版本控制系統 git 華為軟件開發雲 之前寫了一篇《如何選擇版本控制系統 ---為什麽選擇Git版本控制系統》,地址是:http://laoyudage.blog.51cto.com/12854334/1927409,有興趣的可以去看看,本篇文章算是這個系列的第二篇文章。Git誕生於2002年,由

企業應用場景

企業應用場景雲服務器 ECS 應用非常廣泛,既可以作為簡單的 Web 服務器單獨使用,也可以與其他阿裏雲產品(如 OSS、CDN 等)搭配提供強大的多媒體解決方案。以下是雲服務器ECS的典型應用場景。企業官網、簡單的 Web 應用網站初始階段訪問量小,只需要一臺低配置的雲服務器 ECS 即可運行應用程序、數據

內部類的應用場景

多重 使用 應用 實現 一個 外部 場景 內部類 引用 內部類的應用場景: 場景一:當某個類除了它的外部類,不再被其他的類使用時。我們說這個內部類依附於它的外部類而存在,可能的原因有:1、不可能為其他的類使用;2、出於某種原因,不能被其他類引用,可能會引起錯誤。等等。這個場

15個Nodejs應用場景

程序開發 包括 web 核心 協議 soc 異常處理 軟件 webkit 15個Nodejs應用場景 我們已經對Nodejs有了初步的了解,接下來看看Nodejs的應用場景。 2.1 Web開發:Express + EJS + Mongoose/MySQL express

WebView實際應用場景

lin demo 方式 事件 新聞 判斷 url 合規 規範 PS:首先,在這裏我們暫時不考慮只是為了打開一個網頁而使用WebView的這種Demo式的初級使用 說到應用場景,我們還是想象一個能使用WebView的情況,用具體的業務邏輯來引出WebView 我們假設一種情況

老男孩教育每日一題-第83天-binlog是什麽?記錄的什麽?有幾種工作模式及企業應用場景

mysql binlog 每日一題 參考答案含義binlog:是用於記錄所有更新了數據的操作語句,語句以事件的形式保存,它描述數據的更改過程作用:用於實時備份數據,數據庫的主從復制log_bin 打開記錄binlog功能binlog的查看mysqlbinlog /home/mysql/binlog

Memcache應用場景介紹

我會 track post sel ttl 應用場景 內存使用率 集成 影響 面臨的問題 對於高並發高訪問的Web應用程序來說,數據庫存取瓶頸一直是個令人頭疼的問題。特別當你的程序架構還是建立在單數據庫模式,而一個數據池連接數峰 值已經達到5

hadoop應用場景

本地 計算 本地緩存 Lucene 智能 場景 搜索 學習 基於 大數據量存儲:分布式存儲 日誌處理: Hadoop擅長這個 海量計算: 並行計算 ETL:數據抽取到oracle、mysql、DB2、mongdb及主流數據庫 使用HBase做數據分析: 用擴展性應對大量

轉:23種設計模式的應用場景

橋模式 man 16px pop 表示 black strong art bstr 設計模式主要分三個類型:創建型、結構型和行為型。 其中創建型有: 一、Singleton,單例模式:保證一個類只有一個實例,並提供一個訪問它的全局訪問點 ;

物聯網技術在智能制造中的應用場景

制造 智能制造 知識庫 歸一化 運行 提前 整體 sso 應用 原文地址 “智能制造”到底是做什麽的?看了這十個場景,就會有所了解了。 1、設備和環境數據的采集--從單點到全局 場景:某工廠的有多品牌、多種類的生產設備需要聯網,並進行實時監控,好麻煩啊…… 傳統制造模式

第8章 傳輸層(1)_TCP/UDP協議的應用場景

一個數 選擇 str 根據 connect .cn eight 安全 器) 1. 傳輸層的兩個協議 1.1 TCP和UDP協議的應用場景 (1)TCP協議:如果要傳輸的內容比較多,需要將發送的內容分成多個數據包發送。這就要求在傳輸層用TCP協議,在發送方和接收方建立連接

this應用總結

構造方法 void int 構造 兩個 main person bsp hang 1、使用this調用本類中的屬性 1 class Person{ 2 private String name; 3 private int age; 4 pu