JavaScript this关键词详解

最新推荐文章于 2023-05-11 15:38:18 发布

风和雨呀~

最新推荐文章于 2023-05-11 15:38:18 发布

阅读量125

点赞数

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/qq_43968060/article/details/114481557

版权

JavaScript学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

JavaScript this 关键词

首先展示一个实例让我们了解一下 this:

var person = {
	firstName:"bill";
	lastName:"Gates";
	id:"422";
	fullName:function(){
		return this.firstName + "" + this.lastName;
	}
};

-1.this 是什么？

JavaScript this关键词指的是它所属的对象。
它的取值不是固定的，具体取决于它所使用的位置
- 在方法中，this指的是所有者对象；
- 在单独的情况下，this指的是全局对象
- 在函数中，this指的是全局对象
- 在函数中，严格模式下。this是undefined
- 在事件中，this指的是接收事件的元素
像call()和apply()这样的方法可以将this引用到任何对象。

-2方法中的this

在对象方法中，this指的是此方法的拥有者
在上面的例子中。this指的是person对象，person对象是fullName方法的拥有者。

fullName:function(){
		return this.firstName + "" + this.lastName;
	}

-3单独的this

在单独使用时，拥有者是全局对象,因为this指的是全局对象。
在浏览器窗口中，全局对象是[object window]

var x = this;
document.getElementById("demo").innerHTML = x;
//结果为[object window]

-4.1函数中的this(默认)

JavaScript函数中，函数的拥有者默认绑定this
因此在函数中。this指的是全局对象 [object window]
实例：

function myFunction(){
	return this;
}

-4.2函数中的this(严格模式)

JavaScript 严格模式不允许默认绑定、
因此在函数中使用，在严格模式下，this是未定义的（undefined）

<body>
    <p id="demo"></p>
    <script>
        "use strict"
        document.getElementById("demo").innerHTML = myFunction();
        function myFunction() {
            var x = this;
        }
    </script>
</body>

-5.事件处理程序中的this

在HTML事件处理程序中，this指的是接收此事件的HTML元素：
实例

<button onclick = "this.style.display = 'none'">点击以删除我</button>

-6对象方法绑定

this 是person对象（person对象是该函数的拥有者）

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

this.firstName 意味着this (person)对象的firstName属性。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

-7显式函数绑定

call()和apply()方法是预定义的JavaScript方法。
它们都可以用于将另一个对象作为参数调用对象方法
在下面的例子中，当使用person2 作为参数调用person1.fullName时，this将引用person2，即使它是person1的方法。

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

风和雨呀~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript this关键词详解

JavaScript this 关键词首先展示一个实例让我们了解一下 this:var person = { firstName:"bill"; lastName:"Gates"; id:"422"; fullName:function(){ return this.firstName + "" + this.lastName; }};-1.this 是什么？JavaScript this关键词指的是它所属的对象。它的取值不是固定的，具体取决于它所使用的位置在方法中，t
复制链接

扫一扫