3、this指向、箭头函数

113 阅读2分钟

一、this指向规则:

1、默认绑定

function foo(){
	console.log(this);
}

2、隐式绑定:谁调用指向谁

var obj={
	a:2,
	foo:foo
}
obj.foo();

3、显示绑定:call、bind、apply

4、new

二、箭头函数:

var f=a=> a;
//等价下面的形式
var f=function(a){
	return a;
}

1、参数部分的规则:

1、一个参数可以忽略圆括号;

2、如果没有参数,或者多参数,必须写上圆括号;

2、函数体部分的规则:

1、如果只有一条执行语句,可以省略花括号而且执行结果作为返回值;

2、如果多条执行语句必须加上花括号;

3、如果加上花括号,执行语句的结果就不会,隐式返回。

var f = (a,b) =>a+b;
console.log(f(3,2));//5

var f2 = (a,b) =>{a+b};
console.log(f2(3,2));//undefined

三、spread/rest 运算符 也叫拓展运算符(...)

1、通过数组收集不定参数

var f = (...args) => {
	console.log(args); //[3,2]
};
console.log(f(3, 2));

注意:rest运算符作为形参,必须放在形参的最后,函数的length属性会忽略rest形参

2、展开数组

var f = (...arfs) => {
	console.log(args); //[3,2]
};
console.log(f(...[3, 2]));
//等价console.log(f(3, 2));

3、对象合并/Object.assign,

var obj1={a:12};
var obj2={b:13};
console.log({...obj1,...obj2,c:'hello'});//{a:12,b:13,c:'hello'}

var obj3=Object.assign(obj1,obj2)
console.log(obj3===obj1)

注意点以上2个方法只能合并可能枚举的属性,以下的属性是合并不了的:

//enumerable,configurable、writable默认值为false
Object.defineProperty(obj2,'age',{
	value:'18',
	// enumerable:true
})

3、数组合并/数组concat的方法

var arr1=[1];
var arr2=[3]
console.log([...arr1,...arr2,4]);//[1,3,4]

var arr3=arr1.concat(arr2).concat([4])

四箭头函数的this指向:

1、根据箭头函数所在外层的作用域决定;

function foo(){
	console.log(this);//obj1
	return ()=>{
		console.log(this.a);//2
	}
}
var obj1={a:2}
var obj2={a:3}
var bar=foo.call(obj1)
bar.call(obj2)
var person={
	eat:function(){
		console.log(this);//person
	},
	drink:()=>{
		console.log(this);//window
	}
}
		
person.eat()//隐式转换函数内部的this指向
person.drink()//隐式转换函数内部的this指向失败

2、不能作为构造函数使用;

3、在generator函数中yield命令不生效;

4、没有argments对象,由于箭头函数不是有function关键字定义的

var f = (a, b) => {
	console.log(arguments); //FeferenceError
};
console.log(f(3, 2));

案例1

function foo(){
	console.log(this);
	setTimeout(function(){
		console.log(arguments.length);//0
		console.log(this);//window
	},1)
	setTimeout(()=>{
		console.log(arguments.length);//3
		console.log(this);//obj
	},1)
}
var obj={a:12}
foo.call(obj,4,5,6)

结论:箭头函数的内部没有argments和this。打印出来的结果是闭包产生的。

五箭头函数的使用场景:

1、函数的内部没有this的引用、简单的表达式函数。事件绑定,递归;

2、内层函数需要使用外层函数的this或者arguments。

setTimeout(() => {
	console.log(arguments.length);
	console.log(this);
}, 1)