JavaScript学习笔记——this

简介

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

根据函数的调用方式的不同，this会指向不同的对象：

• 以函数的形式调用时，this永远都是window。比如fun();相当于window.fun();
• 以方法的形式调用时，this是调用方法的那个对象
• 以构造函数的形式调用时，this是新创建的那个对象
• 使用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属性";


fun();
//以函数形式调用，this是window
//fun()可以理解成 window.fun()

所以上例中this指的是window对象，所以window.name指的是全局变量中的name

实例二：

function fun() {
	console.log(this);
	console.log(this.name);
}

var obj1 = {
	name: "js",
	sayName: fun
};

var obj2 = {
	name: "vue",
	sayName: fun
};

var name = "全局的name属性";
//以方法的形式调用，this是调用方法的对象
obj2.sayName();

this指的是obj2，所以this.name指的是obj2.name

箭头函数中this的指向

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

类数组 arguments

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

• 函数的上下文对象 this
• 封装实参的对象 arguments

function foo() {
	console.log(arguments);
	console.log(typeof arguments);
}
			
foo(1,22,333);

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

arguments代表的是实参。

在调用函数时，我们所传递的实参都会在arguments中保存

arguments只在函数中使用

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[]来获取单个实参的值：
arguments[0]代表第一个实参，arguments[1]代表第二个实参…以此类推

arguments.callee

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

fn(2,4);

function fn() {
	console.log(arguments.callee);
	var test = "学习了吗";
}

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

arguments可以修改元素

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

fn(2,4);

function fn() {
	arguments[0] = 8; //修改第一个实参为8
	console.log(arguments);
	arguments.push(8); //报错，不可以添加元素
}

改变this的指向

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

fn.call(teacher)
student.like.call(teacher,"唱","跳","rap") //有参数传递，一次按顺序传入

fn.apply(teacher)
student.like.apply(teacher,["唱","跳","rap"]) //有参数传递，参数以数组的形式传入

bind改变this指向

var teacher = {
	name : "老师"
}

var student = {
	name : "学生",
	like:function(){
		console.log(this.name + "喜欢打篮球");
	}.bind(teacher)
	//this绑定到teacher
}
var fn = function () {
	console.log(this);
	console.log(this.name + "喜欢打篮球");
	for (let i = 0; i < arguments.length; i++) {
		console.log(this.name + "喜欢" + arguments[i]);
	}
}.bind(student) //绑定到student

student.like();
console.log("-----------");
fn("唱","跳","rap");

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