关于 this指向问题的详解

Posted 2020-10-07

在这篇文章中主要跟大家简单总结一下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()