js中的function函数与箭头函数
箭头函数
函数的简化,也是匿名函数,拥有词法作用域的this值
在JS中,箭头函数并不是简单的function(){}匿名函数的简写,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,在编写函数时就已经确定了。而匿名函数的this指向运行时实际调用该方法的对象,无法在编写函数时确定。
箭头函数中的this
this 总是指向词法作用域, 也就是外层调用者
箭头函数没有this. 如果使用了this 那么就一定是外层this .不会自动指向window对象
在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是undefined,这种情况,如果你还想用this,就不要用使用箭头函数的写法
var person = {
name: 'tom',
getName: function() {
return this.name;
}
}
//使用es6 来重构上面的对象
const person = {
name:'tom',
getName:()=>this.name
}
//这样编译的结果就是
var person ={
name:'tom',
getName:function getName(){return undefined.name}
}
// 可以稍做改动
const person = {
name: 'tom',
getName: function() {
return setTimeout(() => this.name, 1000);
}
}
// 编译之后变成
var person = {
name: 'tom',
getName: function getName() {
var _this = this; // 使用了我们在es5时常用的方式保存this引用
return setTimeout(function () {
return _this.name;
}, 1000);
}
};
function和=>的区别
function中this是使用时的对象
=>中的this是定义时的对象
再举个例子:
//1.function函数:
function User() {
this.name = 'John';
setTimeout(function greet() {
console.log(`Hello, my name is ${this.name}`); // Hello, my name is
console.log(this); // 指向window
}, 1000);
}
const user = new User();
//2.箭头函数:
function User() {
this.name = 'John';
setTimeout(() => {
'use strict'
console.log(`Hello, my name is ${this.name}`); // Hello, my name is John
console.log(this); // User {name: "John"}
}, 1000);
}
const user = new User();
箭头函数在自己的作用域内没有自己的this
,如果要使用 this
,就会指向定义时所在的作用域的 this
值
function几种写法的区别
1.(function(){}())与(function(){})()
立即执行函数
,在函数定义的地方就直接执行了
JS中函数有两种命名方式
1.声明式
会导致函数提升,function会被解释器优先编译。即我们用声明式写函数,可以在任何区域声明,不会影响我们调用。
function XXX(){}
如果加上()括号后,则会被编译器认为是函数表达式,(加上±号都可以),从而可以用()来直接调用
var k = function(){}
2.函数表达式
函数表达式我们经常使用,而函数表达式中的function则不会出现函数提升。而是JS解释器逐行解释,到了这一句才会解释。因此如果调用在函数表达式之前,则会调用失败。
fn1();
function fn1(){}//可以正常调用
fn2();
var fn2 = function(){}//无法调用
对函数表达式加上(),是可以直接调用的
但是如果是对声明式的后部加上()则是会被编译器忽略。
var fn2 = function(){}();//这样是对的
function fn1(){}();//会被忽略
2. $(function(){})
是$(document).ready(function(){})
的简写形式,是在DOM加载完成后执行的回调函数,并且只会执行一次。