?JavaScript this 关键字_JavaScript 教程 -css5.net


JavaScript this 关键字

通常来说,JavaScript this 指向当前函数所操作的对象。

函数或方法声明的位置不同,会影响this关键字的含义。

  • 在方法中,this 指向当前方法所属的对象。

  • 假如单独运用,this 表示指向全局对象。

  • 在函数中,this 表示指向全局对象。

  • 函数中,严厉模式下,  this 是 undefined 未被定义。

  • 在事件中,this 指向是接纳事件的元素。

  • 相似 call() 和 apply() 方法可以将 this 引用到任何对象。

示例代码

var person = {

 firstName: "css5",

 lastName : "css5 net",

 id       : 586,

 fullName : function() {

return this.firstName + " " + this.lastName;

 }

};


演示一下

一、方法中的 this

在对象方法中, this 是指此办法的具有者。

在上面案例中,this 是指 person 对象。

fullName 方法的持有者是 person 对象。

示例代码

fullName : function() {

 return this.firstName + " " + this.lastName;

}


演示一下

二、单独用 this

当单独使用 this,不依附于任何函数或者对象时,指向全局对象。

浏览器中,全局对象为 object Window:

示例代码

var x = this;


演示一下

严格的模式中,如果单独使用,this 指向全局对象 object Window。

示例代码

"use strict";var x = this;

演示一下

三、函数 this(默认)使用

JavaScript 函数中的持有者默认绑定于 this 。

浏览器中,全局对象为 object Window:

示例代码

function myFunction() {

 return this;

}


演示一下

四、函数中的 this(严格模式)

JavaScript 严格模式一般不允许默认绑定,this (undefined)未定义。

示例代码

"use strict";

function myFunction() {

 return this;

}


演示一下

五、HTML 事件的 this

在 HTML 事件中, this 指明了接收事件 HTML 元素:

示例代码

<button onclick="this.style.display='none'">

你点击我 我就不见了

</button>


演示一下

六、对象绑定

示例代码,this 是 person 对象 person 对象是该函数的持有者:

示例代码

var person = {

 firstName  : "css5",

 lastName   : "css5 net",

 id         : 586,

 myFunction : function() {

return this;

 }

};


演示一下

示例代码

var person = {

 firstName: "css5",

 lastName : "css5 net",

 id       : 586,

 fullName : function() {

return this.firstName + " " + this.lastName;

 }

};


演示一下

this.firstName 象征着 this person 对象的 firstName 属性。


七、显式函数绑定

对象方法有 apply 和 call 就是函数对象的方法。也是 JavaScript 函数中的对象。

下面示例代码中,运用 person2 作为参数调用 person1.fullName 的时候,this 指向 person2,即使它是 person1 的方法:

示例代码

var person1 = {

 fullName: function() {

return this.firstName + " " + this.lastName;

 }

}

var person2 = {

 firstName:"css5",

 lastName: "css5 net",

}

person1.fullName.call(person2);  // 返回 "css5 css5net"


演示一下


相关参考文章

HTML 标签:
HTML 参考手册:
HTML:

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved