javascript
javascript中的this使用场景
剛接觸js不久時對this總是感到無比迷茫，以下是來自js設(shè)計模式與實踐里的總結(jié)
this總是指向一個對象，有時指向全局對象，有時指向構(gòu)造對象，有時指向DOM對象
1. 作為對象的方法調(diào)用
做為對象的方法調(diào)用時 this 指向?qū)ο蟊旧?/p> var Person = {name: 'bingxl',getName: function () {console.log(this.name); //bingxl} }; Person.getName();
2. 作為普通函數(shù)被調(diào)用
普通函數(shù)里的this總是指向全局變量
var name = 'window'; function getName() {var name = 'function';return this.name; }console.log( getName()); //window 嚴(yán)格模式下為undefined對象的方法復(fù)制給變量，在通過變量來調(diào)用后對象的方法變成了普通函數(shù)
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自習(xí)觀看這個例子發(fā)現(xiàn)：
getName1 = Person.getName 是把getName1指向Person.getName方法的內(nèi)存地址(方法本身沒有被執(zhí)行)，其本質(zhì)是個函數(shù)，所以在使用getName1() 時就是調(diào)用普通函數(shù)
getName2 = Person.getName() 是把Person.getName的返回值(已經(jīng)執(zhí)行了)bingxl賦值給getName2
對兩個變量經(jīng)行typeof操作
3. DOM事件觸發(fā)函數(shù)里的this
DOM事件觸發(fā)函數(shù)里的this指向DOM節(jié)點本身
<!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() 是一個普通函數(shù)，所以test里的this指向了全局對象window
4. 構(gòu)造器調(diào)用
使用new運算符調(diào)用構(gòu)造函數(shù)時會返回一個對象，構(gòu)造函數(shù)里的this一般就指向返回的對象
當(dāng)構(gòu)造函數(shù)使用return顯式的返回一個對象時new操作符返回的就是顯式返回的對象
5. call 與 apply
通過call 或apply調(diào)用會改變this的指向
var Doctor = {name: 'bingxl',profession: 'doctor',getProfession: function () {console.log(this.profession);} };var Student = {name: 'zhangsan',profession: 'student' }; Doctor.getProfession(); // doctor Doctor.getProfession.call(Student); //studentend
轉(zhuǎn)載于:https://www.cnblogs.com/scarecrowlxb/p/6858871.html
總結(jié)
以上是生活随笔為你收集整理的javascript中的this使用场景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DevExpress 选择框如何进行模糊
- 下一篇： javascript构造函数继承