ES5基础语法

一.类与对象

  class father {
        that = this;
        constructor(uname, age) {
            this.uname = uname;
            this.age = age;
        }

        sing(song) {
            console.log(this.uname + song);
        }
    }

    class son extends father {

        constructor(uname,age) {

            super(uname,age);
            this.uname=uname;
            this.age = age;

        }

        sing(song){
            console.log(super.sing('我不会唱')+song);
        }

    }


    var idm = new people('liang',13);
    idm.sing('bingyu');

里面的super关键子非常重要,
它代表父类里面的构造函数(相当于调用constructor),另外super还可 以调用父类里面的方法,注意的是super必须写在this的前面,否则会报错.

在写程序的时候 可以在类下面写 that =this 赋值this, 解决后续指向问题

二 . 原型的理解

原型指的就是对象,作用是类方法共享.
主要是节约内存
prototype 原型对象

__proto __对象原型

    function star(uname, age) {

        this.uname = uname;
        this.age = age;

    }

    star.prototype.sing = function () {
        console.log("djijfiosnedfoi");
    }

    var li = new star('li', 68);
    li.sing();
    console.log(li);

原型对象的应用 扩展内置对象方法

call呼叫函数

function fn(x,y) {
       console.log('lalalla我是卖报的小当家');
       console.log(this);
       console.log(x+y);
       console.log("=================")
   }

   var o ={
       name:'andy'
   };
   //调用函数 ,此时this指向window
   fn.call();

   //修改this指向
    fn.call(o,1,3);

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

    function son(name,age,score) {

        // this指向son ,通过call把父类this指向子类this
        father.call(this,name,age);
        console.log(score);

    }

    var li = new son('li',18,100);

通过改变原型对象指向,来继承父类

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

    function son(nmae,age,score) {

        // this指向son ,通过call把父类this指向子类this
        father.call(this,name,age);
        console.log(score);

    }




    son.prototype = new father();

    son.prototype.constructor = son;
    
    son.prototype.exam = function () {
        console.log('孩子要考试');
    }


    var li = new son('li',18,100);
    li.exam();

foreach 数组遍历 es5新语法 return不会终止遍历

 var arr = [1,2,3];
    var sum =0;
    arr.forEach(function (value,index,array) {
        console.log('每个元素:'+value);
        console.log('每个数组:'+index);
        console.log('数组本身'+array);
        sum += value;
    })

    console.log(sum);

filter数组过滤

 var arr = [12, 44, 33, 34];
    var sum = 0;
    var newarr = arr.filter(function (value, index) {
        return value >= 20;
    })

    console.log(newarr);

some()函数查找元素 ,数组中存在就返回true

 var arr = [12, 44, 33, 34];
    var flag = arr.some(function (value) {
        return value == 12;
    })

    console.log(flag);

object.keys(map) 获取对象的key值 并保存到数组中

str.trim()去掉字符串两端空白字符

object.defineProperty(map,'prince',{
      writable :true, //允许修改prince值
      value:999 ,  //改变price的值
	 
})

delete.obj.key //删除 键和值

六种函数及调用

   //1.普通函数 指向window

    function fn() {
        console.log('普通函数'+this);
    }
    //调用
    fn.call();

    //2.对象函数  this指向o

    var o = {
        say: function () {
            console.log('对象函数'+this);
        }
    }
    //调用
    o.say();

    //3构造函数   指向实例对象
    function star() {
        console.log("3构造函数");
    }
    //调用
    new star();


    //4.绑定事件函数   this 指向的是函数调用者
    btn.onclick = function () {}

    //5.定时器函数 this 指向window

    setInterval(function () {},1000);

    //6.立即执行函数 ,自动调用  this 指向window

    (function () {})();

apply(obj.[]) 可以点用函数,也可以改变this指向

  var arr = [1,34,54,123,65,34];

    var max = Math.max.apply(Math,arr);

    console.log(max);

bind()函数用法

不调用原函数,但返回一个新函数

bind()最重要的用法

 var btn = document.querySelector('button');

    btn.onclick = function () {
        this.disabled = true;

        setTimeout(function () {
            this.disabled =false;
        }.bind(this),2000);

    }

开启严格模式
注意:
严格模式下不能随便删除定好的变量

高阶函数

闭包是一个函数,能够访问另一个函数里面的变量. 作用是延伸了变量的作用域的范围

思考:

递归函数: 自己调用自己

 //斐波拉契数列
    function fb(n) {

        if (n == 1 || n == 2) {
            return 1;
        }

        return fb(n - 1) + fb(n - 2);
    }

    console.log(fb(3))

深拷贝浅拷贝

jquery里面的 extend

$.extend(true,o,arr);  //深拷贝

$.extend(false,o,arr);  //浅拷贝

原生js写法

    function copy(target,obj) {

       //浅拷贝
       for (var item in obj){
       
           target[item] = obj[item];

       }

    }

或者
Object.assign(o, arr);

  //浅拷贝
   var arr = {
        age: 68,
        name: 'liang',
        msg: {
            id: 90
        },
        color: ['red', 'green']
    };

    var o = {};


    function deepcopy(target, obj) {

        for (var k in obj) {

            var item = obj[k];
            //判断属性值 是否是一个数组
            if (item instanceof Array) {
                target[k] = [];
                deepcopy(target[k], item);
            }
            else if (item instanceof Object) {
                //判断属性值 是否是一个对象
                target[k] = {};
                deepcopy(target[k], item);
            } else {
                target[k] = item;
            }

        }

    }

    deepcopy(o, arr);


    console.log(o);

    o.msg.id = 80;

    console.log(arr);