이 기사에서는 es6의 화살표 함수와 관련된 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. ES6에서는 =>를 사용하여 함수를 정의할 수 있습니다. 화살표 함수는 익명 함수와 동일하며 함수 정의를 단순화합니다. 모두에게 도움이 되기를 바랍니다.
[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]
ES6에서는 =를 사용할 수 있습니다. > 함수를 정의합니다. 화살표 함수는 익명 함수와 동일하며 함수 정의를 단순화합니다.
// 箭头函数let fn = (name) => { // 函数体 return `Hello ${name} !`;};// 等同于let fn = function (name) { // 函数体 return `Hello ${name} !`;};
화살표 함수는 일반 함수보다 구문이 훨씬 간단합니다. 화살표 함수는 화살표 =>를 사용하여 함수를 정의하고 키워드 function을 생략합니다.
함수의 매개변수는 => 앞의 괄호 안에, 함수 본문은 => 뒤의 중괄호 안에 있습니다.
//没有参数,写空括号 let fn = () => { console.log('hello'); };화살표 함수에 매개변수가 하나라면 매개변수를 둘러싼 괄호도 생략할 수 있습니다
//只有一个参数,可以省去参数括号 let fn = name => { console.log(`hello ${name}!`) };화살표 함수에 여러 매개변수가 있는 경우 매개변수를 쉼표(,)로 구분하고 괄호로 묶습니다.
let fn = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; }
//返回某个简单变量vallet f = val => val;// 等同于let f = function (val) { return val };//返回一个简单的js表达式num1+num2let sum = (num1, num2) => num1 + num2;// 等同于let sum = function(num1, num2) { return num1 + num2;};화살표 함수의 함수 본문에 한 줄의 코드만 있는 경우 반환되는 것은 변수나 간단한 js 표현식이 아니라 객체입니다.
//错误写法—花括号会被解释为函数体 let getItem = id => { id: id, name: 'gaby' };//正确写法 let getItem = id => ({ id: id, name: 'gaby' });화살표 함수의 함수 본문에 명령문이 하나만 있고 값을 반환할 필요가 없는 경우(콜백 함수에 가장 일반적으로 사용됨) void 키워드를 추가하세요
let fn = () => void doesNotReturn();화살표 함수는 콜백 함수에 사용됩니다. 공통적이고 간결함
//栗子1//普通函数 [1, 2, 3].map(function (x) { return x + x; });//ES6箭头函数[1, 2, 3].map(x => x + x);
//栗子2//普通函数 var result = [2, 4, 5, 1, 6].sort(function (a, b) { return a - b; });//ES6箭头函数 var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);
let fn = () => { console.log('Hello World !') }; console.log(fn.prototype); // undefined
를 상속합니다. 화살표 함수에는 자체 this 포인터가 없습니다. 정의된 외부 실행 환경을
고 이 값을 상속받습니다. 화살표 함수의 이 지점은 정의될 때 결정되며 나중에 변경되지 않습니다. (! Forever)var id = 'Global'; //普通函数 function fn1() { setTimeout(function () { console.log(this.id) }, 1000); } //箭头函数 function fn2() { setTimeout(() => { console.log(this.id) }, 1000); } fn1.call({ id: 'obj' });//Global fn2.call({ id: 'obj' });//obj
분석: 일반 함수의 setTimeout은 1초 후에 전역 범위에서 실행됩니다. 이 모든 것은 window 객체를 가리키며, this.id는 가리킵니다. 전역 변수 id에. 화살표 함수의 this는 정의될 때 결정됩니다. fn2의 실행 환경에서 this 지점은 호출 메서드에 의해 변경되고 obj
(2) Chestnut 2var id = 'Global'; var obj = { id: 'OBJ', a: function () { console.log(this.id) },//方法a普通函数定义 b: () => { console.log(this.id) }//方法b用箭头函数定义 }; obj.a();//OBJ obj.b();//Global
분석: 일반 함수는 개체의 메서드로 호출되며, 이는 해당 개체가 속한 개체를 가리킵니다(호출하는 사람이 누구를 가리킴). this.id는 obj.id입니다. 실행 환경을 정의하고 창 개체를 가리키며 전역 변수인 출력 Global을 가리킵니다. 중괄호 {}는 별도의 실행 환경을 구성할 수 없으므로 여전히 전역 컨텍스트에 있습니다.
.call()/.apply()/.bind() 메서드를 사용할 수 있습니다. 함수가 실행될 때 this의 지점을 동적으로 수정합니다. 그러나 화살표 함수의 this는 정의될 때 결정되고 절대 변경되지 않기 때문입니다
var name = 'gaby' var person = { name: 'gabrielle', say: function () { console.log('say hello', this.name) }, //普通函数 say2: () => { console.log('say2 hello', this.name) } //箭头函数 } person.say.call({ name: 'Mike' }) person.say2.call({ name: 'Amy' })
간접 수정: 상속받은 일반 함수의 this 지점을 수정하면 화살표 함수의 this 지점도 그에 따라 변경됩니다.
箭头函数的this指向定义时所在的外层第一个普通函数,跟使用的位置没有关系。
let al let aObj = { msg: 'a的this指向' }; bObj = { msg: 'b的this指向' }; a.call(aObj); //将a的this指向aObj b.call(bObj); //将b普通函数的this指向bObj 箭头函数内部的this指向也会指向bObj function b() { al(); } function a() { al = () => { console.log(this, 'this指向定义时外层第一个普通函数 ') }; }
箭头函数的this指向继承自外层第一个普通函数的this,那么如果没有外层函数,它的this指向哪里?
this的绑定规则:非严格模式下,默认绑定的this指向全局对象,严格模式下this指向undefined。
如果箭头函数外层没有普通函数继承,箭头函数在全局作用域下,严格模式和非严格模式下它的this都会指向window(全局对象)
箭头函数中的this引用的是最近作用域中的this,是向外层作用域中,一层层查找this,直到有this的定义。
构造函数做了什么?
JS内部首先会先生成一个对象
再把函数中的this指向该对象
然后执行构造函数中的语句
最终返回该对象实例
箭头函数没有自己的this,this继承外层执行环境中的this,且this永远不会改变。new会报错
let fn = (name, age) => { this.name = name; this.age = age; }; let person = new fn('gaby', 20)
ES6新引入的属性,普通函数可以通过new调用,new.target返回该函数的引用。用于确定构造函数是否为new调用。箭头函数并不能作为构造函数使用new,自然也不支持new.targer。
let fn = () => { console.log(new.target) }; fn()
new fn2(); function fn2() { let fn = () => { console.log(new.target) }; fn(); }
箭头函数的this指向全局对象,会报arguments未声明的错。
let fn = name => { console.log(arguments) } let fn2 = function (name) { console.log(arguments) } //fn() fn2()
let fn = name => { console.log(arguments) } let fn2 = function (name) { console.log(arguments) } fn() fn2()
解析:普通函数可以打印arguments,箭头函数报错。因为箭头函数处于全局作用域中,在全局作用域没有arguments的定义,箭头函数本身没有arguments,所以报错。
let fn2 = function (name) { console.log('fn2:', arguments) let fn = name => { console.log('fn:', arguments) } fn() } fn2('gaby')
解析:两个函数打印的argument相同,都是fn2函数的arguments。
总结
箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部(函数)执行环境中的值。
rest是ES6的API,用于获取函数不定数量的参数数组。这个API可以用来替代arguments。
//形式是...变量名 let fn = (first, ...arr) => { console.log(first, arr); } fn(1, 2, 3, 4);
解析:rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。获取函数的第一个确定的参数,以及用一个变量接收其他剩余函数的实例。
rest必须是函数的最后一位参数
let a = (first, ...rest, three) => { console.log(first, rest, three); }; a(1, 2, 3, 4);
函数的length属性不包括rest
箭头函数和普通函数都可以使用rest参数,而arguments只能普通函数用。
接收参数rest比arguments更加灵活,完全可以自定义。
rest是一个真正的数组可以使用数组API,arguments只是一个类数组。
function fn(name, name) { console.log('fn2:', name) } let fn2 = (name, name) => { console.log('fn:', name) } fn('wang', 'gaby') fn2('wang', 'gaby')
函数箭头一条语句返回对象字面量,需要加括号。
箭头函数在参数和箭头之间不能换行
箭头函数的解析顺序相对||靠前
对象无法构造单独的作用域
var name = 'gaby' var person = { name: 'gabrielle', say: function () { console.log('say hello', this.name) }, //普通函数 say2: () => { console.log('say2 hello', this.name) } //箭头函数 } person.say() person.say2()
解析:person.say2()方法是一个箭头函数,调用person.say2()的时候this指向全局对象,达不到预期。对象无法构成单独的作用域,定义say2()箭头函数的时候作用域在全局作用域。
var button = document.querySelector('.btn'); button.addEventListener('click', () => { this.classList.toggle('on'); });
解析:报错。按钮点击是一个回调函数,而箭头函数内部的this指向外一层普通函数的this,在这里就是window,所以报错。改成普通函数就不会报错
(1)箭头函数语法更简洁清晰,快捷。
(2)箭头函数没有原型prototype,并不会自己创建this,并且this不能被修改,call等都不能修改到。只能间接修改被继承的this
(3)箭头函数的this在定义时就定了,继承外一层的普通函数
(4)如果箭头函数外一层再外一层都不能找到普通函数,在严格和非严格情况下都会指向window对象
(5)箭头函数的this指向全局,使用arguments会报未声明的错误
(6)箭头函数的this指向外一层的普通函数,使用argument继承该普通函数
(7)箭头函数不能构造函数,不能new.target,不能new,没有constructor
(8)箭头函数不支持重复命名参数,普通函数可以重复命名参数
【相关推荐:javascript视频教程、web前端】
위 내용은 ES6의 화살표 기능에 대한 자세한 검토의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!