this的指向问题在JavaScript中是非常重要的,如果用一句话说明 this 的指向,那么就是: 谁调用它,this 就指向谁。
1、普通函数(this指向window)默认绑定;严格模式下会抛出错误undefined(’use strict’)
var age = 18; function fun() { console.log(this.age); } fun();//18 this指向window
2、对象函数(this指向该方法所属对象)
var o = { sayHi:function(){ console.log(this); } } o.sayHi();//{sayHi: ƒ}
3、构造函数(如果没有return,则this指向这个对象实例;如果存在return返回一个对象,则this指向返回的这个对象)
function Star(uname,age){ this.uname = uname; this.age = age; } let a = new Star('xiaoming',18); console.log(a);//Star {uname: "xiaoming", age: 18}
function Star(uname,age){ this.uname = uname; this.age = age; let obj = { age:10 } return obj; } let a = new Star('xiaoming',18); console.log(a);//{age: 10}
4、绑定事件函数(this指向的是函数的调用者,指向了接收事件的 HTML 元素)
var btn = document.querySelector('button'); btn.onclick = function () { console.log(this); //btn <button>点击</button> }
5、定时器函数(this指向window)
setTimeout(function(){ console.log(this); }, 2000);//this指向window
6、立即执行函数(this 指向window)
(function(){ console.log(this); //this指向window })();
7、箭头函数(不绑定this关键字,指向的是函数定义位置的上下文this)
const obj ={name:'xiaoming'}; function fn(){ console.log(this);//{name: "xiaoming"} return ()=>{ console.log(this);//{name: "xiaoming"} } } const resFn = fn.call(obj); resFn();
8、显示绑定:函数通过call()、apply()调用,bind()方法绑定,this指向的就是指定的对象;
function fun() { console.log(this.age); } var person = { age: 20, fun } var age = 28; var fun = person.fun; fun.call(person); //20 fun.apply(person); //20 fun.bind(person)(); //20
如果这些方法传入的第一个参数是 undefined 或者 null,严格模式下 this 指向为传入的值undefined / null;非严格模式下指向window(全局);
function fun() { console.log(this.age); } var person = { age: 20, fun } var age = 28; var fun = person.fun; fun.call(null); //28
9、 隐式绑定:函数的调用是在某个对象上触发的,即调用位置上存在上下文对象(相当于对象函数中的this指向)。典型的隐式调用为: xxx.fn()
function fun() { console.log(this.age); } var person = { age: 20, fun } var age = 28; person.fun(); //20 隐式绑定
欢迎大家关注公众号:
————————————————
版权声明:本文为CSDN博主「中南啊哈」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42721322/article/details/106391922
评论前必须登录!
注册