前端es6新增（一）

ES6 ES6 语法 obj arr 进阶函数(闭包 递归) JS底层原理 运行原理

this指向

函数分类：

1.普通函数

function fn(){
   console.log(this);  //window
}
fn();

2.立即执行函数

(function(){
    console.log(this);  //window
})()

3.事件函数

var box = document.getElementById("box")
box.onclick = function(){
    console.log(this);   // 事件源
}

4.定时器

setTimeout(function(){
    console.log(this);   //window
})

5.构造函数

    function Fun(name,age,sex){
        this.name = name
        this.age = age
        this.sex = sex
        console.log(this);   //实例
    }
    var myl = new Fun("马跃磊",30,"男")
    var pzj = new Fun("彭忠杰",18,"女")

6.对象中的函数

    var obj = {
        name:"马跃磊",
        a:function(){
            console.log(this);  
        }
    }
    obj.a()   //当前对象

修改this指向

var obj1 = {
    x:1,
    y:3
}
var obj2 = {
    x:2,
    y:5
}
var x = 4,y = 6;
function sum(x,y){
    console.log(x,y);  //2,5
    console.log(this.x,this.y);  // 4,6  window下的x,y
}
sum(2,5)

方法.call(需要修改的this指向,参数1,参数2)

var obj1 = {
    x:1,
    y:3
}
var obj2 = {
    x:2,
    y:5
}
var x = 4,y = 6;
function sum(x,y){
    console.log(x,y);  //3,4
    console.log(this.x,this.y);  // 1,3
}
sum.call(obj1,3,4)

方法.apply(需要修改的this指向,[参数1,参数2])   求最大值

var obj1 = {
    x:1,
    y:3
}
var obj2 = {
    x:2,
    y:5
}
var x = 4,y = 6;
function sum(x,y){
    console.log(x,y);  //5,6
    console.log(this.x,this.y);  // 2,5
}
sum.apply(obj2,[5,6])


var arr = [2,5,2,3,4]
var max = Math.max.apply(Math,arr)
var min = Math.min.apply(Math,arr)
console.log(max);
console.log(min);

方法.bind(需要修改的this指向,参数1,参数2)   返回的是一个函数体  需要手动调用

var obj1 = {
    x:1,
    y:3
}
var obj2 = {
    x:2,
    y:5
}
var x = 4,y = 6;
function sum(x,y){
    console.log(x,y);  //3,7
    console.log(this.x,this.y);  // 2,5
}
var bin = sum.bind(obj2,3,7)
bin()

三个的共同点：都是修改this指向

不同点：

1.调用方式不同   call和apply为直接调用函数  bind返回函数体 需要手动调用

2.传参方式不同   call和bind为枚举的方式   apply为数组传参方式

原型

构造函数   创建对象的方法

var obj = {}    var obj1 = new Object()

    function Per(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
        this.class = function () {
            console.log("web21");
        }
    }

实例化

    var myl = new Per("马跃磊", 18, "女")
    var pzj = new Per("彭忠杰", 19, "女")

成员  构造函数内部属性

实例成员  构造函数内部通过this创建的成员  可以被实例化 就是可以通过this.访问的

静态成员  后续添加的内容  可以访问  直接用this.访问找不到方法

    console.log(pzj.class);
    console.log(myl.class);
    console.log(myl.class === pzj.class); //false

构造函数  浪费内存

原型   prototype 显示原型     __proto__ 隐式原型

Per.prototype.fun = function () {
    console.log("开心");
}
console.log(myl.fun === pzj.fun); //true
console.log(Per.prototype);
console.log(pzj.__proto__);
console.log(Per.prototype === pzj.__proto__);

实例的原型(隐式原型__proto__) === 构造函数的原型(prototype)

所有对象的原型都是__proto__

原型链

原型   实例的隐式原型 === 构造函数的显示原型

    function Per(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
        this.class = function(){
            console.log("web21");
        }
    }

constructor 用来指向原来的构造函数

    var pzj = new Per("彭忠杰", 19, "女")
    Per.prototype.fn = function () {
        console.log("bb");
    }
    Per.prototype = {
        constructor: Per,
        fun: function () {
            console.log("aa");
        }
    }
    var myl = new Per("马跃磊", 18, "男")

    console.log(pzj);
    console.log(myl);

    console.log(Per.prototype.__proto__.__proto__); //null
    console.log(myl.__proto__.__proto__.__proto__); //null
    console.log(Object.prototype.__proto__); //null

    console.log(Array.prototype); //数组的原型
    console.log(String.prototype); //字符串的原型

    var arr = [1, 4, 6, 8, 2] //new Array
    var arr1 = [3, 4, 5, 7, 8, 9, 0, 20]
    console.log(arr.__proto__);

    Array.prototype.sub = function () {
        var sum = 0
        for (var i = 0; i < this.length; i++) {
            sum += this[i]
        }
        console.log(sum);
    }
    arr.sub()  //21
    arr1.sub()  //56