都說JavaScript 是一種很靈活的語言,這其實也可以說它是一個混亂的語言,下面透過本文給大家分享JavaScript中this的指向知識,有興趣的朋友一起看看吧
都說JavaScript 是一種很靈活的語言,其實也可以說它是一個混亂的語言。它把 函數式程式設計 和 物件導向程式設計 糅合一起,再加上 動態語言 特性,簡直強大無比(其實是不能和C++比的,^_^ )。
JS 裡的this
#在function 內部被建立
指向呼叫時所在函數所綁定的物件(拗口)this 不能被賦值,但可以被call/apply 改變
目錄
* 一個特例
* 開始判斷 * 法則一:物件方法中的this指向物件本身(箭頭函數形式的除外)
* 法則二:多層巢狀函數中的this指向等同於包含該this的最近一個function的this
* 習題集
* 普通函數中的this * 函數執行後返回另一個函數中的this(普通函數中)
* 多層巢狀函數中的this(計時器&箭頭函數)1
##一個特例
// 构造函数 function Student(name) { this.name = name } // 创建小明和小红两个实例 var XM = new Student('xiaoming') var XH = new Student('xiaohong') // 输出信息 console.log(XM) // Student {name: "xiaoming"} console.log(XH) // Student {name: "xiaohong"}在建構子中,this上的值會在建立實例的時候被綁定到新建立的實例上。不適用於下面的判斷方法,所以特此說明。 ############開始判斷############下面是典型例子,我們的分析從這裡開始。 ############
var x = { name: 'bw2', getName1: function() { console.log(this) }, getName2: function() { setTimeout(() => { console.log(this) },0) }, getName31: () => { console.log(this) }, getName32: function() { return function() { console.log(this) } } } x.getName1() // {name: "bw2", getName1: ƒ} x.getName2() // {name: "bw2", getName1: ƒ} x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}###法則一:物件方法中的this指向物件本身(箭頭函數形式的除外)############
var x = { name: 'bw2', getName1: function() { console.log(this) } } x.getName1() // {name: "bw2", getName1: ƒ}###法則二:多層巢狀函數中的this指向等同於包含該this的最近一個function的this######箭頭函數沒有獨立的this作用域,所以繼續往外層走,走到了getName: function( ){}。那麼就是他了,this指向等同於這個function內部的this指向。根據法則一,this指向物件本身。 ############
var x = { name: 'bw2', getName2: function() { console.log(this) // 等同于此处的this setTimeout(() => { console.log(this) // 原始的this位置 },0) } } x.getName2() // {name: 'bw2', getName1: ƒ}###我們可以試著在瀏覽器中運行,看看結果。 ######法則三:箭頭函數以及非指向物件方法中的function的情況下this指向window######根據法則二,this是指向最近的function,因此,這裡的this等同於返回的函數中的this,不是物件方法中的this,所以,指向全域。 ######是不是覺得有點奇怪?不過實踐證明確實如此。 ############
var x = { name: 'bw2', getName31: () => { console.log(this) }, getName32: function() { return function() { console.log(this) } } } x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}#########習題集############歡迎大家依照法則一到三依序判斷,猜測結果,並在瀏覽器下測試。測試結果也可以回复,大家一起討論。 ######因本人能力有限,此系列法則可能在部分情況下失效。歡迎大家一起討論。 ######下面是做題時間。 #########普通函數中的this###############
function x() { console.log(this) } x()###函數執行後會傳回另外一個函數中的this(普通函數中)## ##########
function xx(){ return function() { console.log(this) } } xx()()###多層巢狀函數中的this(定時器&箭頭函數)1############
var x = { name: 'bw2', getName: () => { setTimeout(() => { console.log(this) },0) } } x.getName()###多層嵌套函數中的this(定時器&箭頭函數)2############
var x = { name: 'bw2', getName: () => { setTimeout(function() { console.log(this) },0) } } x.getName()####再次說明,該法則為實驗性法則,未進行大範圍的測試,不保證在所有情況下都有一致的結果。如果你發現了法則判斷失敗的情況,歡迎留言,一起探討。 ###
以上是如何判斷JavaScript中this的指向的詳細內容。更多資訊請關注PHP中文網其他相關文章!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。