JS中的this
1.在普通函数中
在普通函数中this:window
function fun1(){
console.log(this)
}
fun1();
2.在dom事件注册中
事件注册中:事件对象dom
<p class="dom">在dom事件注册中</p>
var dom = document.querySelector(".dom")
dom.onclick =fun2
function fun2(){
console.log(this)
}
3. 在对象中
this:为对象本身
var obj ={
name:"wmq",
age:20,
say:function(){
console.log(this.age)
alert(`大家好我的名字${this.name}`)
}
4. 全局函数中
全局方法中this:window【setinterval,settimeout】
var age =50;
var obj ={
name:"wmq",
age:20,
say:function(){
console.log(this.age)
alert(`大家好我的名字${this.name}`)
},
grow:function(){
window.setInterval(function(){
this.age++;
console.log(this.age);
},3000)
}
}
var fn=obj.say;
fn();
5.箭头函数中
箭头函数中的this 指向上一层作用域中的this
var age =50;
var obj ={
name:"wmq",
age:20,
say:function(){
console.log(this.age)
alert(`大家好我的名字${this.name}`)
},
grow:function(){
window.setInterval(()=>{
this.age++;
console.log(this.age);
},3000)
}
}
obj.grow()
6.构造函数中
作为构造函数调用,this 指代new 出的对象
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1
//运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2
7.call apply bind
call apply bind 中this指向的是call的第一个参数
call与apply都是执行一个函数,使用第一个参数进行冒充函数中this
function add(a,b){
console.log(this,a,b)
}
add.call({name:"wmq"},4,5)
apply的传参方式用数组
function add(a,b){
console.log(this,a,b)
}
add.apply({name:"wmq",age:18},[8,7]);
bind 把bind的第一个人参数作为this 创建一个人新的函数,并可以指定默认参数
function add(a,b){
console.log(this,a,b)
}
var fn =add.bind({eye:2,leg:2},10,5)
fn();