js函数执行的上下文对象(this)

01、this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数 ,这个隐含的参数就是this , this指向的是一个对象，这个对象我们称为函数执行的上下文对象。

根据函数的调用方式的不同，this会指向不同的对象: [ 重要 ]

1. 以函数的形式调用时, this永远都是window。 比如fun();相当于window. fun();
2. 以方法的形式调用时，this是调用方法的那个对象
3. 以构造函数的形式调用时，this是新创建的那个对象
4. 使用call和apply调用时, this是指定的那个对象

针对第一条举例

function fun() {
	console. log(this);
	console. log(this. name);
}
var obj1 = {
	name : "'smyh",
	sayName: fun
};
var obj2 = {
	name: "vae" ,
	sayName: fun
};
var name = "全局的name属性"; //以函数形式调用，this 是window
fun(); //可以理解成window.fun()

上面的举例可以看出，this指向的是window对象，所以this.name指的是全局的name.

针对第二条举例

function fun() {
	console.log(this);
	console.1og(this.name);
}
var obj1 = {
	name: "smyh",
	sayName: fun
var obj2 = {
	name: "vae",
	sayName: fun
};
var name = "全局的name属性"; //以方法的形式调用，this是调用方法的对象
obj2.sayName();

上面的举例可以看出，this指向的是对象obj2，所以this.name指的是obj2.name.

箭头函数中this的指向:

ES6中的箭头函数并不会使用上面四条标准的绑定规则，而是会继承外层函数调用的this绑定(无论this绑定到什么)。

02、改变this的指向

1. call/apply：通过call/apply可以使得在调用函数的时候修改this指向

   var studet = {
       name:"小明",
       like:function(){
           console.log(this)
           console.log(this.name+"喜欢打篮球")
       }
   }
   
   var teacher = {
       name:"老王",
   }
   var fn = studet.like
   
   //studet.like()
   fn() // this-->window
   fn.call(teacher) //将this-->teacher
   fn.call(teacher,"唱","跳","rap") // call有参数传递
   fn.apply(teacher) //将this-->teacher
   fn.apply(teacher,["唱","跳","rap"]) // apply有参数传递
   

2. bind改变this指向

   var student = {
       name:"小明"
   }
   var fn = function(){
       console.log(this)
       console.log(this.name+"喜欢打篮球")
       for (var i = 0; i < arguments.length; i++) {
           console.log(this.name+"喜欢"+arguments[i])
       }
   }.bind(student)
   
   fn()//this-->student
   

03、类数组arguments

在调用函数时,浏览器每次都会传递进两个隐含的参数:

1. 函数的上下文对象this
2. 封装实参的对象 arguments

如：

function foo() {
	console.log(arguments);
	console.log(typeof arguments);
}
foo();

arguments是一个类数组对象 ,它可以通过索引l来操作数据,也可以获取长度。

arguments代表的是实参。在调用函数时,我们所传递的实参都会在arguments中保存。有个讲究的地方是:arguments只在函数中使用。

1. 返回函数实参的个数: arguments.length

   arguments.length可以用来获取实参的长度。

   如：

   fn(2,4);
   fn(2,4,6);
   fn(2,4,6,8);
   function fn(a,b) {
   	console.log(arguments);
   	console.log(fn.length);//获取形参的个数
   	console. log(arguments.length); //获取实参的个数
   	console. log("--------------");
   }
   

   我们即使不定义形参，也可以通过arguments来使用实参(只不过比较麻烦) : arguments[0]表示第一个实参、arguments[1]表示第二个实参…

2. 返回正在执行的函数: arguments.callee

   arguments里边有一个属性叫做callee，这个属性对应一个函数对象 ，就是当前正在指向的函数对象。

   function fun() {
   	console. log(arguments.callee == fun); //打印结果为true
   }
   fun("hello");
   

   在使用函数递归调用时，推荐使用arguments.callee代替函数名本身。

3. arguments可以修改元素

   之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。举例:

   fn(2,4);
   fn(2,4,6);
   fn(2,4,6,8);
   function fn(a,b) {
   	arguments[0] = 99; //将实参 的第-一个数改为99
   	arguments.push(8); //此方法不通过， 因为无法增加元素
   }