067_this关键字
1. 在JavaScript中, this關(guān)鍵字指的是它所屬的對(duì)象。
2. this使用位置的不同, 它的值也不同:
2.1. 單獨(dú)使用, this指的是全局對(duì)象。
2.2. 在函數(shù)中, this指的是全局對(duì)象。
2.3. 在函數(shù)中, 嚴(yán)格模式下, this是undefined。
2.4. 在方法中, this指的是所有者對(duì)象。
2.5. 在構(gòu)造器函數(shù)中, this是沒有值的。它是新對(duì)象的替代物。當(dāng)一個(gè)新對(duì)象被創(chuàng)建時(shí), this的值會(huì)成為這個(gè)新對(duì)象。
2.6. 像call()和apply()這樣的方法可以將this引用到任何對(duì)象。
2.7. 在事件中, this指的是接收事件的元素。
3. 單獨(dú)使用this
3.1. 在單獨(dú)使用時(shí), 擁有者是全局對(duì)象, 因此this指的是全局對(duì)象。
3.2. 在瀏覽器窗口中, 全局對(duì)象是[object Window]:
document.write(this + '<br />'); // 輸出[object Window]3.3. 在嚴(yán)格模式中, 如果單獨(dú)使用, 那么this指的是全局對(duì)象[object Window]:
"use strict"; document.write(this + '<br />'); // 輸出[object Window]4. 函數(shù)中的this(默認(rèn))
4.1. 在JavaScript函數(shù)中, 函數(shù)的擁有者默認(rèn)綁定this。
4.2. 因此, 在函數(shù)中, this指的是全局對(duì)象[object Window]。
function myFn1(){document.write(this + '<br />'); // 輸出[object Window] } myFn1();5. 函數(shù)中的this(嚴(yán)格模式)
5.1. JavaScript嚴(yán)格模式不允許默認(rèn)綁定。
5.2. 因此, 在函數(shù)中使用時(shí), 在嚴(yán)格模式下, this是未定義的undefined。
"use strict"; function myFn2(){document.write(this + '<br />'); // 輸出undefined } myFn2();6. 方法中的this
6.1. 在對(duì)象方法中, this指的是此方法的"擁有者"。
6.2. 在下面的例子中, this指的是obj1對(duì)象。obj1對(duì)象是info方法的擁有者。
var obj1 = {id: 1001, name:'華為手機(jī)', info: function(){document.write('id: ' + this.id + ', name: ' + this.name + '<br />'); }}; obj1.info();7. 構(gòu)造器函數(shù)中的this
7.1. 在構(gòu)造器函數(shù)中, this是沒有值的。它是新對(duì)象的替代物。當(dāng)一個(gè)新對(duì)象被創(chuàng)建時(shí), this的值會(huì)成為這個(gè)新對(duì)象。
7.2. 在下面的例子中, Computer中所有的this都是沒有值的。當(dāng)我們使用Computer創(chuàng)建了一個(gè)ctr1對(duì)象時(shí), Computer中所有的this就是ctr1對(duì)象; 當(dāng)我們使用Computer創(chuàng)建了一個(gè)ctr2對(duì)象時(shí), Computer中所有的this就是ctr2對(duì)象。
function Computer(name, price){this.name = name;this.price = price; } Computer.prototype.info = function(){document.write('name: ' + this.name + ', price: ' + this.price + '<br />'); } var ctr1 = new Computer('華為筆記本', 4000); ctr1.info(); var ctr2 = new Computer('聯(lián)想臺(tái)式機(jī)', 3500); ctr2.info();8. 顯式函數(shù)綁定
8.1. call()和apply()方法是預(yù)定義的JavaScript方法。
8.2. call()和apply()都可以用于將另一個(gè)對(duì)象作為參數(shù)調(diào)用對(duì)象方法。
8.3. 在下面的例子中, 當(dāng)使用book作為參數(shù)調(diào)用Goods.prototype.print時(shí), this將引用book; 當(dāng)使用drink作為參數(shù)調(diào)用Goods.prototype.print時(shí), this將引用drink。即使print是Goods原型上的方法:
function Goods(name, price){this.name = name;this.price = price; } Goods.prototype.print = function(){document.write('name: ' + this.name + ', price: ' + this.price + '<br />'); } function Book(name, price){this.name = name;this.price = price; } var book = new Book('JavaScript高級(jí)程序設(shè)計(jì)', 80.00); function Drink(name, price){this.name = name;this.price = price; } var drink = new Drink('農(nóng)夫山泉', 1.50); Goods.prototype.print.call(book); Goods.prototype.print.apply(drink);9. 事件處理程序中的this
9.1. 在html事件處理程序中, this指的是接收此事件的html元素:
<button onclick="this.style.display='none'">點(diǎn)擊來刪除我</button> // this是button元素10. 請(qǐng)注意this并不是變量, 它是關(guān)鍵字。您無法改變this的值。
11. 例子
11.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>this關(guān)鍵字</title></head><body><button onclick="this.style.display='none'">點(diǎn)擊來刪除我</button><script type="text/javascript">document.write('<hr />');document.write(this + '<br />');function myFn1(){document.write(this + '<br />');}myFn1();var obj1 = {id: 1001, name:'華為手機(jī)', info: function(){document.write('id: ' + this.id + ', name: ' + this.name + '<br />');}};obj1.info();function Computer(name, price){this.name = name;this.price = price;}Computer.prototype.info = function(){document.write('name: ' + this.name + ', price: ' + this.price + '<br />');}var ctr1 = new Computer('華為筆記本', 4000);ctr1.info();var ctr2 = new Computer('聯(lián)想臺(tái)式機(jī)', 3500);ctr2.info();function Goods(name, price){this.name = name;this.price = price;}Goods.prototype.print = function(){document.write('name: ' + this.name + ', price: ' + this.price + '<br />');}function Book(name, price){this.name = name;this.price = price;}var book = new Book('JavaScript高級(jí)程序設(shè)計(jì)', 80.00);function Drink(name, price){this.name = name;this.price = price;}var drink = new Drink('農(nóng)夫山泉', 1.50);Goods.prototype.print.call(book);Goods.prototype.print.apply(drink);</script><script type="text/javascript">"use strict";document.write('<hr />嚴(yán)格模式<br />');document.write(this + '<br />');function myFn2(){document.write(this + '<br />');}myFn2();</script></body> </html>11.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的067_this关键字的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 066_严格模式
- 下一篇： 084_html DOM