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