1,ES5函数
例 function test() {},函数分为四个部分:
第一部分,保留字function;
第二部分,函数名,可以省略(function(){}..这是一个匿名函数anonymous);
第三部分,一对圆括号,中间为参数,可为空,附带两个隐藏参数,this和arguments;
第四部分,执行的代码块;
这部分只有一对括号,作用却很大。比如调用一个函数:var ss = aa; 和 var ss = aa(); 是不一样的。前面的是把函数的指针赋给了ss,ss也就是这个函数,后面的是把aa函数执行的结果赋给了ss , ss是它的返回值。
第五部分,最后还可以加一对圆括号,为调用函数。
2,ES6箭头函数
例 () => {},函数仅保留两个部分:
第一部分,一对圆括号,传参;
第二部分,执行的代码块。
第三部分,最后还可以加一对圆括号,为调用函数。
以上,仅为结构的简单差别,用法上要做中注意的是this的指向问题:
ES5中,this指向函数执行时的上下文环境对象,this的指向有三种情况:
1,如下,b()是C对象以属性的形式调用的,c.b(),此时 b 函数中的this指向的是this.c这个对象;
注意:此种调用方式经常会出现this绑定丢失的情况,比如函数作为参数传递的时候(存在隐式赋值,这时候虽然形式上是obj.fn,实际上等于var a = obj.fn,与直接调用fn是一样的,另比如settimeout等js内置函数,也是一样)
隐式绑定
2,普通函数的调用,b(),此时this指向window;
默认绑定。
3,c.b().call({ name: "B"}),call会使this指向改变。
显式绑定
以此原理,衍生出了硬绑定:用一个函数包含对象c和函数b(),内部调用b.call(c),重复使用外部函数,实现b的this绑定。
es5提供了api,b.bind(c)
4,第四种是new操作符创建新对象的四个步骤中,会修改this指向:
1),创建一个新对象
2),原型继承
3),绑定this
4),return,如无return值,返回本身
以上四中优先级:
new > 显式 > 隐式 > 默认
ES6中,箭头函数this的指向,是定义时,this的指向对象。此处指向factory构造函数的实例。
console打印结果为a以上,欢迎大家借鉴与指正!
网友评论