067_this关键字
1. 在JavaScript中, this關(guān)鍵字指的是它所屬的對象。
2. this使用位置的不同, 它的值也不同:
2.1. 單獨使用, this指的是全局對象。
2.2. 在函數(shù)中, this指的是全局對象。
2.3. 在函數(shù)中, 嚴格模式下, this是undefined。
2.4. 在方法中, this指的是所有者對象。
2.5. 在構(gòu)造器函數(shù)中, this是沒有值的。它是新對象的替代物。當一個新對象被創(chuàng)建時, this的值會成為這個新對象。
2.6. 像call()和apply()這樣的方法可以將this引用到任何對象。
2.7. 在事件中, this指的是接收事件的元素。
3. 單獨使用this
3.1. 在單獨使用時, 擁有者是全局對象, 因此this指的是全局對象。
3.2. 在瀏覽器窗口中, 全局對象是[object Window]:
document.write(this + '<br />'); // 輸出[object Window]3.3. 在嚴格模式中, 如果單獨使用, 那么this指的是全局對象[object Window]:
"use strict"; document.write(this + '<br />'); // 輸出[object Window]4. 函數(shù)中的this(默認)
4.1. 在JavaScript函數(shù)中, 函數(shù)的擁有者默認綁定this。
4.2. 因此, 在函數(shù)中, this指的是全局對象[object Window]。
function myFn1(){document.write(this + '<br />'); // 輸出[object Window] } myFn1();5. 函數(shù)中的this(嚴格模式)
5.1. JavaScript嚴格模式不允許默認綁定。
5.2. 因此, 在函數(shù)中使用時, 在嚴格模式下, this是未定義的undefined。
"use strict"; function myFn2(){document.write(this + '<br />'); // 輸出undefined } myFn2();6. 方法中的this
6.1. 在對象方法中, this指的是此方法的"擁有者"。
6.2. 在下面的例子中, this指的是obj1對象。obj1對象是info方法的擁有者。
var obj1 = {id: 1001, name:'華為手機', info: function(){document.write('id: ' + this.id + ', name: ' + this.name + '<br />'); }}; obj1.info();7. 構(gòu)造器函數(shù)中的this
7.1. 在構(gòu)造器函數(shù)中, this是沒有值的。它是新對象的替代物。當一個新對象被創(chuàng)建時, this的值會成為這個新對象。
7.2. 在下面的例子中, Computer中所有的this都是沒有值的。當我們使用Computer創(chuàng)建了一個ctr1對象時, Computer中所有的this就是ctr1對象; 當我們使用Computer創(chuàng)建了一個ctr2對象時, Computer中所有的this就是ctr2對象。
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)想臺式機', 3500); ctr2.info();8. 顯式函數(shù)綁定
8.1. call()和apply()方法是預定義的JavaScript方法。
8.2. call()和apply()都可以用于將另一個對象作為參數(shù)調(diào)用對象方法。
8.3. 在下面的例子中, 當使用book作為參數(shù)調(diào)用Goods.prototype.print時, this將引用book; 當使用drink作為參數(shù)調(diào)用Goods.prototype.print時, 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高級程序設(shè)計', 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'">點擊來刪除我</button> // this是button元素10. 請注意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'">點擊來刪除我</button><script type="text/javascript">document.write('<hr />');document.write(this + '<br />');function myFn1(){document.write(this + '<br />');}myFn1();var obj1 = {id: 1001, name:'華為手機', 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)想臺式機', 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高級程序設(shè)計', 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 />嚴格模式<br />');document.write(this + '<br />');function myFn2(){document.write(this + '<br />');}myFn2();</script></body> </html>11.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的067_this关键字的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 066_严格模式
- 下一篇： 073_JS JSON