js this指向及改变this指向总结

最新推荐文章于 2024-05-29 19:36:44 发布

木木夕0714

最新推荐文章于 2024-05-29 19:36:44 发布

阅读量288

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_50384924/article/details/117570747

版权

本文探讨JavaScript中this的灵活性，包括其在方法中指向所属对象、全局对象、普通函数、事件处理中的行为，并介绍call(), apply(), bind()改变this指向的方法，以及它们的区别和应用场景。

摘要由CSDN通过智能技术生成

面向对象语言中 this 表示当前对象的一个引用
但在 javaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变
一.关于this指向
1.在方法中,this 表示该方法所属的对象

var person = {
  firstName: "John",
  lastName : "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
John Doe

2.如果单独使用,this 表示全局对象

"use strict";
var x = this;
在浏览器中，window 就是该全局对象为 [object Window]

3.普通函数调用，此时 this 指向 window

function fn() {
    console.log(this);   // window
}
fn();  //  window.fn（),此处默认省略window
window.myFunction();

4.在函数中,在严格模式下,this是未定义的(undefined)

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

5.在事件中,this表示接收事件的元素

<body>
    <button id="btn">hh</button>
<script>
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function() {
        console.log(this); // btn
    }
</script>
</body>

二.更改 this 指向的方法
1.call() 方法
格式函数名.call();
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数开始:将原函数的参数往后顺延一位。

var Person = {
     name:"lixue",
     age:21
}
function fn(x,y){
     console.log(x+","+y);
     console.log(this);
     console.log(this.name);
     console.log(this.age);
}
fn.call(Person,"hh",20);

2.apply() 方法
格式函数名.apply();
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数: 数组。数组里面放入我们原有的参数
apply() 与call（）非常相似，不同之处在于提供参数的方式，apply（）使用参数数组，而不是参数列表

function fn(a,b,c){
     console.log(this,a+b+c); 
}
fn();
fn.apply(document,[1,2,3]);

3.bind() 方法
第一个参数：改变this指向
第二个参数之后：实参
返回值为一个新的函数
使用的时候需要手动调用下返回的新函数（不会自动执行）

function fn(a,b,c){
    console.log(this,a+b+c); //window
}
let ff = fn.bind('小明',1,2,3); //手动调用一下

总结:
(1) apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
(2) apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
(3) apply 、 call 两者都可以利用后续参数传参；但是传参的方式不一样，apply是数组，call是正常传参形式
(4) bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

木木夕0714

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js this指向及改变this指向总结

面向对象语言中 this 表示当前对象的一个引用但在 javaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变一.关于this指向1.在方法中,this 表示该方法所属的对象var person = { firstName: "John", lastName : "Doe", id: 5566, fullName : function() { return this.firstName + " " + this.lastName; }};//
复制链接

扫一扫