ES6 函数的相关扩展

函数的扩展

给参数设置默认值

ES6里面默认给参数设置默认值

1.为了防止报错 我们不用再特地去函数内部处理参数

2.设置了默认值 即便所有的参数都不传 程序也不会报错

注意点：

参数是在函数的局部作用域内设置的局部变量 默认是在函数内部声明过的 所以不要再使用let在函数内部声明

function count2(n = 20, m = 50) {

            // let n = 80;

            console.log(n * m);
        }

        count2();
        count2(5, );
        count2(2, 20);

箭头函数

=> 箭头函数 ES6是允许使用箭头函数的

1.只有一个参数 并且函数体只有一句话 那么参数可以省略() 返回值可以省略return 函数体省略了{}

var fn=n=>567;
var r=fn();
console.log(r);

相当于：

function fn(n){
	return 123;
 } 
var r=fn();
console.log(r);

2.如果箭头函数没有参数 或者有多个参数 那么参数中的() 就不能省略

3.如果箭头函数的函数体有多条代码 那么就不能省略{} 以及返回值也不能省略return

	function study(){
			// 3.如果箭头函数的函数体有多条代码 那么就不能省略{} 以及返回值也不能省略return
            var lesson="Math";
            return "good good study,day day up!";
        }

改成箭头函数

var study=()=>{
    var lesson="Math";
    return "good good study,day day up!";
}

4.如果函数体只有一句话 并且 返回值是对象 那么这个返回值必须使用()包起来, 因为 函数体使用的是{} 对象也是{}

var info=(name,age)=>({
            name:name,
            age:age
        })

        console.log(info("Tony",18));

如果对象只有一个键值对 那么不会报错 但是也没有正确的值

因为js引擎在解析的时候 {} 默认解析为函数体结构

 	var p=(name)=>{
            name:name
        }

        console.log(p("Tom")); //undefined

函数中的this指向

ES5中函数的this指向

1.普通函数的this ： this 谁调用就指向谁 this是在调用的时候确定的

function f1() {
        console.log(111);
        console.log(this);
        }

        f1();  //111 window
        // 相当于
        window.f1(); //111 window

2.对象里面的方法 它里面的this指向当前这个对象

	var obj = {
            a: "111",
            b: "222",
            print: function () {
                console.log(2222);
                console.log(this);
            }
        }

        obj.print(); //222 Object


        var fn1 = obj.print;
        var fn2 = obj.print();  //222 Object

        var fnw = function () {
            console.log(111);
            console.log(this);
        }
        window.fnw();// this 指向window


        obj.f2=f1;
        obj.f2(); //this 指向obj

3.定时器里面的this 如果没有特殊的指向 那么 setInterval和setTimeout里面的回调函数的this一定指向window

function f1() {
        console.log(111);
        console.log(this);
        }

var obj = {
            a: "111",
            b: "222",
            print: function () {
                console.log(2222);
                console.log(this);
            }
        }

setTimeout(f1, 1000);
setTimeout(obj.print, 1000);
setTimeout(obj.print(), 1000); //这里运行打印出this是obj 和定时器没有任何关系 只是把obj.print()调用了一遍

var name = "I am window's name ";

        var obj2 = {
            name: "I am obj's name",
            fn: function () {
                console.log(this);

                var that = this;

                setTimeout(function () {
                    console.log(this.name); //I am window 's name
                    console.log(that.name);//I am obj 's name
                }, 1000)
            }
        }

        obj2.fn();

4.自执行函数this指向Window

5.构造函数里面的this

 function Student(name, age) {
            this.name = name;
            this.age = age;
            console.log(this);
        }

(1) 把构造函数当成普通函数调用 this指向window

Student("张三", 18);

(2) 作为构造函数 this就指向new关键字创建的实例化对象

var s = new Student("张三", 16);
        console.log(s);
        console.log(s.name);  // "张三"
        console.log(window.name); // ""

(3) 当做为构造函数时 返回值默认是new关键字创建的实例化对象 但是 如果手动添加了返回值 那么 如果是基本数据类型 就不会影响 如果是复杂数据类型 那么就会覆盖掉默认的返回值

function Student(name, age) {
            this.name = name;
            this.age = age;
            console.log(this);

            // return {
            //     name : "1111",
            //     age : 1111
            // };

            return [12, 13, 15];
        }

        var s1 = new Student("丽丽", 16);
        console.log(s1.age);

ES6中函数的this指向

在ES6里面 箭头函数的this指向 是继承自父级执行上下文中的this

箭头函数没有自己的this 他的this 是从父级继承而来的 箭头函数的this在定义的时候就已经确定了

var name = "I am window's name ";

        var obj = {

            // 找到obj并继承

            name: "I am obj's name",
            fn: function () {

                console.log(this);

                var that = this;


                setTimeout(() => {
                    console.log(this.name); //I am obj's name  this继承父级
                    console.log(that.name);//I am obj's name   this继承父级
                }, 1000)
            }
        }

        obj.fn();

把fn也换成箭头函数

 var obj2 = {

            // 没有就向外找， 找到window并继承

            name: "I am obj's name",
            fn: () => {

                // this继承父级

                console.log(this);

                var that = this;

                setTimeout(() => {
                    console.log(this.name); //I am window's name  this继承父级
                    console.log(that.name);//I am window's name   this继承父级
                }, 1000)
            }
        }

        obj2.fn();

普通函数当中 this是在调用的时候确定的 谁调用 this就指向谁 比较直观的是谁点出来的函数 那么这个函数就指向谁
而箭头函数中 this是在声明的时候就已经确定 而且不会改变 this是继承自父级执行上下文的this.