當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript中的this使用场景

發布時間：2024/4/14 javascript 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript中的this使用场景小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

剛接觸js不久時對this總是感到無比迷茫，以下是來自js設計模式與實踐里的總結

this總是指向一個對象，有時指向全局對象，有時指向構造對象，有時指向DOM對象

1. 作為對象的方法調用

做為對象的方法調用時 this 指向對象本生

var Person = {name: 'bingxl',getName: function () {console.log(this.name); //bingxl} }; Person.getName();

2. 作為普通函數被調用

普通函數里的this總是指向全局變量

var name = 'window'; function getName() {var name = 'function';return this.name; }console.log( getName()); //window 嚴格模式下為undefined

對象的方法復制給變量，在通過變量來調用后對象的方法變成了普通函數

var name = 'window'; var Person = {name: 'bingxl',getName: function () {return this.name;} }; var getName1 = Person.getName; console.log(getName1()); // window var getName2 = Person.getName(); console.log(getName2); // bingxl

自習觀看這個例子發現：
getName1 = Person.getName 是把getName1指向Person.getName方法的內存地址(方法本身沒有被執行)，其本質是個函數，所以在使用getName1() 時就是調用普通函數
getName2 = Person.getName() 是把Person.getName的返回值(已經執行了)bingxl賦值給getName2
對兩個變量經行typeof操作

console.log(typeof getName1); //function console.log(typeof getName2);// string

3. DOM事件觸發函數里的this

DOM事件觸發函數里的this指向DOM節點本身

<!DOCHTML html> <html> <head><meta charset="UTF-8"> </head> <body><div id='person'>click this</div><script>window.id = 'window';var div = document.getElementById('person');div.addEventListener('click', function () {console.log(this.id); //personvar test = function () {console.log(this.id); // window};test();});</script> </body> </html>

test() 是一個普通函數，所以test里的this指向了全局對象window

4. 構造器調用

使用new運算符調用構造函數時會返回一個對象，構造函數里的this一般就指向返回的對象
當構造函數使用return顯式的返回一個對象時new操作符返回的就是顯式返回的對象

5. call 與 apply

通過call 或apply調用會改變this的指向

end

轉載于:https://www.cnblogs.com/scarecrowlxb/p/6858871.html

總結

以上是生活随笔為你收集整理的javascript中的this使用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： DevExpress 选择框如何进行模糊
下一篇： javascript构造函数继承