关于 this指向问题的详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于 this指向问题的详解相关的知识,希望对你有一定的参考价值。

在这篇文章中主要跟大家简单总结一下js中的this指向问题

JS中, this的值取决于调用的模式, 下面就给大家详细的列举一下

1.所有在全局环境下声明的变量或方法都属于window对象

//1.function声明函数
    var name="李四"
    function fn(){
    console.log(this.name) 
    }
//    fn()//window 李四
//2.function 声明函数赋给变量
    var fun = function(name){
    console.log(name)
   }
   fun(‘蜘蛛‘)//window 蜘蛛
// 3.自执行函数
   (function(name){
// console.log(name)
   }(‘赵四‘))//window 赵四

2.方法调用中this的指向

//1.对象方法调用
var obj = {
method: function(fn) { 
console.log(fn)
}
};
obj.method(1); 
//2.事件绑定
var btn = document.querySelector(button)
btn.addEventListener(click,function(){
console.log(this)//btn
})

3.在构造函数中使用(先看谁在调用再判断this指向)

function show(name) {
this.val = name;
};
show.prototype.getVal = function() {
console.log(this.val);
};
var func = new show(1);
func.getVal(); 
console.log(func.val)

4.可以改变this指向的属 call apply bind

//1.call()
function sayName(name){
console.log(this.name)
}
var name = 张三
var person1 = {
name:李四
}
var person2 = {
name:王五
}
sayName()//张三
sayName.call(person1)//李四
sayName.call(person2)//王五
//2.apply()
sayName.apply(person1,[person1])
sayName.apply(person2,[person2])
//3.bind()方法第一个参数是我们希望函数中this指向的对象,后面是我们希望给函数的参数绑定的值
var person = {
name:刘罗锅,
age:98,
gender:
}
function myName(age,gender){
console.log(this.name,age,gender)
}
var newName = myName.bind(person,78,)
newName()

 





以上是关于关于 this指向问题的详解的主要内容,如果未能解决你的问题,请参考以下文章

关于 js 中 this 指向的问题

C++|详解类成员指针:数据成员指针和成员函数指针及应用场合

关于JS面向对象中原型和原型链以及他们之间的关系及this的详解

关于JS面向对象中原型和原型链以及他们之间的关系及this的详解

前端面试基本---this 指向(callapplybind用法及区别详解)

详解JS中定时器setInterval和setTImeout的this指向问题