Javascript中this的指向

目录

1、函数中的this

(1)构造方法中的this,指向新创建的对象

(2)直接通过函数名调用函数时,this指向全局对象window 

(3)函数作为对象的方法调用,this指向该对象 

(4)、分析this的指向 

​ 2、更改this的指向

(1)apply():是以数组的方式传递参数           (2)call():是以参数方式传参

(3)两种方法的区别

​

3、bind() 

---

1、函数中的this

(1)构造方法中的this,指向新创建的对象

 function Person(name)
          {
              this.name = name;
          }
          var p1 = new Person("张三")//this指向p1这个对象

(2)直接通过函数名调用函数时,this指向全局对象window 

class  Person{
  constructor(name){
    this.name = name;
  }

}
Person.ShowThis = function(){
  console.log(this);//代表全局的window
}

Person.ShowThis()//ShowThis是静态成员，只能通过类名调用

(3)函数作为对象的方法调用,this指向该对象 

class  Person{
  constructor(name){
    this.name = name;
  }
 
   sayHello(){//成员方法(实例成员)
     console.log(this);
   }
}

 var p1 = new Person('张三')
 p1.sayHello()//函数作为对象的方法

(4)、分析this的指向 

function foo(){//普通方法
  return this;//this指向全局的对象window
}
//o是一个对象,有两个成员，静态成员name和动态成员func(是一个函数)
var o = {
  name : '张三',
  func : foo
}
console.log(foo());//foo函数中的this指向全局对象window
console.log(foo()===window);// 返回true

console.log(o.func());//将foo函数作为对象o的函数进行调用，此时foo函数中的this指向o对象

 2、更改this的指向

(1)apply():是以数组的方式传递参数    
       
(2)call():是以参数方式传参

function method(){
  console.log(this.name);//this指向全局对象window
}
//更改method方法中this的指向，此时this指向对象{name:'张三'}
method.apply({name:'张三'})
//更改method方法中this的指向，此时this指向对象{name:'李四'}
method.call({name:'李四'})

(3)两种方法的区别

function method(a,b){
  console.log(a);
  console.log(b);
  console.log(a+b);
}
method.apply({},[1,2])//以数组的方式传参(空对象代表当前调用的函数)
method.call({},3,4)//以参数方式传参

3、bind() 

function method(a,b){
  console.log(this.name+a+b);
}
var name = '张三';//全局变量，属于window
var test = method.bind({name:'赵四'},'3','4');//将{name:'赵四'}对象绑定到method上。此时method方法中的this指向赵四这个对象
method('1','2');//全局调用,函数中的this指向window
test()

---