javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介

实例对象和构造函数的关系及原型：

实例对象是通过构造函数创建出来的，实例对象的构造器constructor就是指向构造函数的；每个实例对象中的同一方法的指向是各不相同的，但是其属性值相同的属性可以相同，这样会造成内存浪费，可以将这个方法的函数提到构造函数的外面，这样就不会造成内存浪费了，但是这种方式容易造成命名问题，实际开发中会通过原型来解决这个问题（原型的作用：共享数据，节省内存空间，将需要共享的属性或方法直接写在原型中即可 ），如下：

	<script>
        // 解决多个对象中方法指向不同而带来内存浪费问题，将方法的函数提到对象外：
        function basketball() {
            console.log('篮球');
        };
        // 构造函数：
        function Person(name, age, height, weight) {
            this.name = name;
            this.age = age;
            this.height = height;
            this.weight = weight;
            //对象中的方法使用构造函数内的函数：
            this.eat = function() {
                console.log('吃');
            };
            //对象中的方法调用构造函数外面的函数：
            this.play = basketball;
        };
        // 通过原型给构造函数添加方法：
        Person.prototype.song = function() {
            console.log('可可托海的牧羊人');
        };
        var person1 = new Person('jack', 18, 170, 50);
        var person2 = new Person('杰克', 18, 170, 50);
        console.log(person1.constructor == Person); //true，对象的原型指向构造函数
        console.log(person2.age == person1.age); //true，各个对象的属性值相等的情况下这这两个值相同
        console.log(person2.eat == person1.eat); //false，对象的方法的函数写在构造函数中时，各个对象的指向不同
        console.log(person2.basketball == person1.basketball); //true，对象的方法的函数写在构造函数外时，各个对象的指向相同
        console.log(person2.song == person1.song); //true，最终要通过原型的方式给对象添加相同的方法，实际开发中采用的方法
    </script>

简单原型语法：

给原型添加属性或者方法可以节省内存空间，共享数据，但是每次都要通过prototype的方式多次重复，为此可以将这些属性或方法通过对象的形式写在{}中，但是这种方法需要手动写上构造器这个属性，如：

	<script>
        function Person(names, age) {
            this.names = names;
            this.age = age;
        };
        // 通过对象的方式给原型添加属性和方法后，前面不能在以普通的方式添加属性或方法，否则会报错或undefined，添加在对象形式后面是可以的：
        Person.prototype = {
            constructor: Person, //手动添加构造器
            weight: 49,
            height: 180,
            eat: function() {
                console.log('面条')
            }
        };
        Person.prototype.colors = 'red'; //在对象形式的后面添加新的属性或方法是没事的
        Person.prototype.play = function() {
            console.log('篮球')
        }; //在对象形式的后面添加新的属性或方法是没事的
    
        var per = new Person('jack', 17);
        per.eat()
        console.log(per.weight);
        console.log(per.colors);
        per.play();
    </script>

原型中方法可以互相访问：

原型中的方法可以互相访问，方法中可以调用属性；如果要访问一个属性或方法，首先会到实例对象中去找，若无才会去原型中找。若还是没有则返回undefined

	<script>
        function Person(names, age) {
            this.names = names;
            this.age = age;
        };
        Person.prototype = {
            constructor: Person, //手动添加构造器
            weight: 49,
            height: 180,
            eat: function() {
                console.log('面条');
                this.song();
            },
            song: function() {
                console.log('可可托海的牧羊人');
                console.log(this.height);
            }
        };
        var per = new Person('jack', 17);
        per.eat()
        console.log(per.colors);
    </script>

内置对象原型中添加方法：

通过原型的方式可以给内置对象添加自定义方法：

	<script>
        String.prototype.hello = function() {
            console.log('hello');
        };
        var str = new String();
        str.hello();
    
    		//给数组添加求和方法：
        var arrs = new Array(1, 2, 3);
        Array.prototype.sums = function() {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            };
            return sum;
        };
        console.log(arrs.sums());
    </script>

将局部变量变成全局变量：

将局部变量变成全局变量的方式：window.变量名 = 值；

原型链：

实例对象和原型直接的关系通过__proto__来联系，这种关系称为原型链。实例的指向可以通过proto进行改变。

通过原型继承属性或方法：

通过改变prototype的指向可以继承父级的属性或方法，如：

	<script>
        function Person(names) {
            this.names = names;
        };
        Person.prototype.eat = function() {
            console.log('吃大米');
        };
    
        function Father(age) {
            this.age = age;
        };
        // 将Father构造函数中的原型指向new Person()实例对象中的原型
        Father.prototype = new Person('jack');
        Father.prototype.work = function() {
            console.log('工作');
        };
        
        function Myfather(weight) {
            this.weight = weight;
        };
        // 将Father构造函数中的原型指向new Person()实例对象中的原型
        Myfather.prototype = new Father(30);
        var myfather = new Myfather(50)
        console.log(myfather.names + '---' + myfather.age + '---' + myfather.weight);
        myfather.eat();
        myfather.work();
    </script>

通过call借用构造函数实现继承：

通过改变原型的指向实现继承存在一个缺陷：改变指向时，初始化了实例对象，属性的值已经写死，无法改变，为了解决这个缺陷，可以借用构造函数实现继承，(call方法的使用：在需要继承父级属性的子级构造函数中通过：父级构造函数.call(改变函数this的指向,父级构造函数中的参数,子级构造函数中的参数))，子级构造函数中的形参写上父级构造函数中的形参，但是这种方式只能继承属性，若要继承方法，那么就要将借用构造函数和改变原型相结合，如：

	<script>
        function Person(names, sex) {
            this.names = names;
            this.sex = sex;
        };
        Person.prototype.eat = function() {
            console.log('吃饭');
        };
    		//借用构造函数实现属性继承：
        function Student(names, sex, score) {
            Person.call(this, names, sex, score);//第一个参数是改变Person中this的指向为Student构造函数实例对象
            this.score = score;
        };
        // 单独的借用构造函数只能实现属性继承，方法不能继承，因此实际开发中可以将借用构造函数和改变原型指向结合使用：
        Student.prototype = new Person();
    
        var student1 = new Student('jack', '男', 70);
        var student2 = new Student('sharry', '女', 80);
    
        console.log(student1.names, student1.sex, student1.score);
        console.log(student2.names, student2.sex, student2.score);
        student1.eat();
        student2.eat();
    </script>

apply调用函数：

apply(参数1,数组形式参数2)和call相似，也可以调用函数并改变函数中this的指向,第一个参数改变函数中this的指向，第二个参数以数组的形式传参数，返回的是字符串形式的值；但是apply的主要用法是调用内置对象方法来实现某些函数中没有的方法的功能，如：

	<script>
        // 实现call方法的作用：
        var obj = {
            weight: 120
        };
    
        function fn(x, y, z) {
            console.log(this); //{weight: 120}
            console.log(x, y, z); //age 12 names
        };
        fn.apply(obj, ['age', 12, 'names']);
    
        // 如借用Math中min方法来实现求数组中最小值：
        var array = [2, 3, 4, 1]
        var minValue = Math.min.apply(null, array); //当一个形参不需要实参时可以用null代替，这里最好将指向指为apply的调用者
        console.log(minValue); //1
        console.log(Math.max(2, 3, 4, 1)); //4,Math对象中求最大值最小值的方法中传入的是数字
    </script>

bind拷贝函数：

fn.bind(参数1，参数2)，不会调用原函数，但是可以通过第一个参数改变函数this的指向并返回一个新函数；此方法不会立即执行函数，而call和apply都会立即执行行数，因此bind在实际开发中用的会比较多。

拷贝继承：

浅拷贝：指的是地址的拷贝；深拷贝：指完全的把堆上的代码也拷贝，但是地址不拷贝。

	<script>
        var obj1 = {
            names: 'jack',
            age: 18
        };
        // 1.通过改变指针实现拷贝继承：
        var obj2 = obj1;
        console.log(obj2.names);
    
        // 2.通过for-in遍历将obj1的属性和值存到obj3中：
        var obj3 = {};
        for (var key in obj1) {
            obj3[key] = obj1[key];
        };
        console.log(obj3.names);
    
        // 3.通过遍历原型的属性和方法拷贝对象：
        var obj4 = {};
    
        function Person() {};
        Person.prototype.names = 'sharry';
        Person.prototype.eat = function() {
            console.log('面条');
        };
    
        var person = new Person('sharry');
        
        for (var keys in Person.prototype) {
            obj4[keys] = Person.prototype[keys];
        };
        console.log(obj4.names);
        obj4.eat();
    </script>

构造函数、实例对象、原型之间的关系：

通过class来创建对象：

class类指的是一类具有相似属性或方法的事物，通过new也可以创建实例对象,其语法是：class 类名{},class类的大括号中要写构造器：constructor(形参){this.属性或方法}，但是实际开发中不建议将方法写在构造器中，而是省去关键字function直接写在class类中，之后通过new实例化对象，如：

	<script>
        class Person {
            constructor(names, age) {
                this.names = names;
                this.age = age;
                // 方法不建议这样写：
                this.eat = function() {
                    console.log('面条')
                };
            };
            // 类中的方法建议写在类中：
            play() {
                console.log('篮球')
            };
        };
    
        var personOne = new Person('jack', 18);
        console.log('names:' + personOne.names + '---age:' + personOne.age);
        personOne.eat();
        personOne.play();
    </script>

class类的继承：

class类可以继承一个类的属性和方法，其语法：class 新类名 extends 被继承类名 {};之后通过new实例化对象即可，如：

	<script>
        class Person {
            constructor(names) {
                this.names = names;
                this.eat = function() {
                    console.log('面条')
                };
            };
            play() {
                console.log('篮球')
            };
        };
        // 继承
        class Son extends Person {};
    
        var sonOne = new Son('jack');
        console.log(sonOne.names);
        sonOne.eat();
        sonOne.play();
    </script>

super()调用父级类中的构造器：

被继承后的类，若要调用父级的方法，而方法中有参数，此时给子级实例对象传入参数是无法被父级中的方法中拿到的，此时需要给子级构造器中通过super(参数)将子级实例对象中的参数传给父级构造器,super还可以调用父类中的父类中的普通方法，如：

	<script>
        class Person {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            };
            sum() {
                return this.x + this.y;
            };
            play() {
                console.log('篮球');
            };
        };
        class Son extends Person {
            constructor(a, b) {
                // 这里不能直接通过this来设置属性接收参数，而要通过super()调用父级中的构造器，才能调用父级的方法：
                super(a, b);//必须在this接收参数之前调用super
              	// this.a = a;//这里的this.参数 是给自己的方法准备的参数，自己的方法调用时需要接收的参数
                // this.b = b;
            }
            play() {
                super.play();
                console.log('排球');
            }; 
        };
    
        var sonOne = new Son(1, 2);
        console.log(sonOne.sum());
        sonOne.play(); //方法的调用首先会先 从自己的类中找，若没有则去父级类中找，若还是没有会报错，其中有则执行方法(就近原则)
    </script>

开启严格模式：

严格模式在IE10以上版本才支持，消除了javascript中的一些问题写法；若要给某个作用域开启严格模式，则在该作用域写入以下代码即可：

	'use strict';//用来开启严格模式：严格模式指的是书写代码必须按照代码规范，不能省略代码

高阶函数：

高阶函数是对其他函数进行操作的函数，它接受的参数是函数或返回的是函数。

	<script>
        function f1(callback) {
            callback && callback();
        };
        f1(function f2() {
            console.log('这是高阶函数')
        });
    </script>

闭包：

闭包指：有权访问另一函数作用域中变量的函数（在普通函数中是无法访问到其他作用域的变量的）,其作用是延伸了变量的作用范围，

	<script>
        function f() {
            var str = '123';
    
            function f2() {
                console.log(str);
            };
            return f2;
        };
        var result = f(); //这里的f接收的是f2函数，相当于在f外面打印str，高阶函数实现闭包
        result();
    </script>
    
    <script>
        // 利用闭包打印出li的类容：类似这种问题可以采用：for循环里面首先放入自执行函数，自执行函数里面写入处理业务的代码
        // 通过遍历将循环里面的所有代码存到内存中，等定时器启动后，执行业务代码，闭包也有坏处
        var liList = document.querySelectorAll('li');
        for (var i = 0; i < liList.length; i++) {
            (function(x) {
                var ids = setInterval(function() {
                    console.log(liList[x].innerHTML);
                    clearInterval(ids);
                }, 2000);
            })(i);
        };
    </script>

递归：

递归指：一个函数在内部可以调用自己本身，那么这个函数就是自己，由于递归可能出现死循环发生栈溢出，所以必须要加退出条件return。

	<script>
        var i = 0;
        function f() {
            console.log(i);
            if (i > 5) {
                return;
            };
            i++;
            f();
        };
        f();
    </script>

es6内容简介：

关键字let、const：

let关键字是es6中声明变量的，其作用和var相似，let声明的变量只在块级有效,块级作用域指{}里面，没有变量提升，必须先声明后使用，具有暂时性死区性（使用一个变量先从本块级作用域查找，有则使用，注意变量没有提升,MDN文档中有变量提升，但是会抛出错误）。

const关键字是es6中声明常量的，因此若要改变这个关键字声明的常量，就会报错，它也是在块级有效，变量不会提升，MDN文档中有变量提升，但是会抛出错误。

	<script>
        if (true) {
            var num1 = '1';
            console.log(num1); //1
        };
        if (true) {
            let num2 = '2';
            console.log(num2); //2
        };
        if (true) {
            const num3 = '3';
            console.log(num3); //3
        };
        console.log(num1); //1
        console.log(num2); //num2 is not defined
        console.log(num3); //num3 is not defined
    </script>

解构赋值：

es6中允许从数组或对象中提取值，按照对应位置，对变量赋值；对象中每个属性名和前面属性名一致；若在对象中，前面也是键值对的形式，那么这值实际是变量，接收的是对应的后面对象张的值，如：

	<script>
        var [a, b, c] = [1, 2, 3];
        var {d,e,f}={d:4,e:5,f:6};
        var {dn: num1,en: num2,fn: num3} = {dn: 4,en: 5,fn: 6};
        console.log(b);//2
        console.log(e);//5
        console.log(num2); //5
    </script>

箭头函数：

箭头函数是es6中另一种写法，其作用和普通函数一样，只是在书写上比较简洁了。箭头函数没有函数名，因此通常用变量接收，如：const fn =()=>{};,小括号中可以传入形参；箭头函数中的this不指向调用者，而指函数定义位置的上下文中this即：箭头函数所在作用域中的this

	<script>
        var sum = (x, y) => {
            console.log(x + y);
        };
        sum(2, 3); //5
    
        // 当函数体中只有一句执行代码，且这行代码就是函数的返回值，此时可以省略{}：
        var sum1 = (x, y) => console.log(x + y);
        sum1(1, 2); //3
    
        // 当函数的形参只有一个的时候可以省略():
        const num = x => console.log(x);
        num(5); //5
    </script>

剩余参数：

当函数的实参大于一个形参的个数时，给形参最后一个参数见面加…后（当然可以给第一个形参直接加…，此时将传入的实参以数组的形式返回），剩余的实参则会以数组的形式存在最后一个形参里面：

	<script>
        function num(num1, num2, ...numn) {
            console.log(numn);
        };
        num(1, 2, 3, 4); //[3, 4]
    
        // 剩余参数和解构配合：
        var [num1, ...num] = [1, 2, 3, 4, 5];
        console.log(num); //[2, 3, 4, 5]
    </script>

扩展运算符：

扩展运算符可将数组或对象转为用逗号分隔的参数序列，其语法是在变量名前面加…，如：

	<script>
        var arr = [1, 2, 3];
        console.log(...arr); //1 2 3,原本...arr里面是用逗号隔开的，但是这里是因为console.log将里面的逗号当做分隔符了。
    
        //扩展运算符可以将多个数组合并：
        var arr1 = [1, 2, 3];
        var arr2 = [4, 5];
        var arr3 = [6];
        var arrn = [...arr1, ...arr2, ...arr3];
        console.log(arrn); //[1, 2, 3, 4, 5, 6]
    
        // 利用扩展运算符将伪数组转换为真数组：其语法：[...伪数组变量名]
    </script>

模板字符串：

使用反引号的字符串称之为模板字符串，可以很好地将变量解析到字符串中的语法，其语法：在反引号中使用（${变量名}），模板字符串支持换行，支持调用函数如：

	<script>
        var num = 2;
        var str = `今天是${num}号`;
        console.log(str);
    
        // 调用函数和换行：
        var say = () => {
            return 'hello'
        };
        var sayhe = `${say()}
        word`;
        console.log(sayhe);
    </script>

Set数据结构：

Set数据结构类似数组，但是成员的值都是唯一的（当传入的数据中有重复的值时，会自动将重复值去掉），其是一个构造函数，需要实例化对象才能使用：const sets = new Set();此对象可以接收一个数组，数组中的数据会被自动存到set数据结构中；支持forEach遍历set数据：

	<script>
        var sets = new Set([1, 2, 2]);
        console.log(sets.size); //2，size属性用来获取set中存的不重复值的个数，和length类似。
    
        // 给sets增加数据：add(value)
        sets.add(3);
        console.log(sets); //Set(3) {1, 2, 3}
    
        //删除sets数据中的值：delete(value),并返回一个布尔值用于判断是否删除成功：
        var result = sets.delete(1);
        console.log(result); //true
        console.log(sets); //Set(2) {2, 3}
    
        // 判断某个值是否是sets中的成员：has(value)，返回一个布尔值
        var results = sets.has(7);
        console.log(results); //false
    
        // 清空sets中的数据：clear():
        sets.clear();
        console.log(sets);//Set(0) {}
    </script>

数组查询：find和findindex：
在es6中，js为数组提供了一个遍历数组查询某项的API：find-----需要传入一个函数作为参数；同样在es6中js为数组提供了一个遍历数组查询某项下标的API：findIndex—也需要传入一个函数作为参数，如下案例：

var arr = [
  {'id':1,'name':'一'},
  {'id':2,'name':'二'},
  {'id':3,'name':'三'},
  {'id':4,'name':'四'}
];
// 当函数中的条件满足时，会终止遍历并返回这个条件的数组项
var result = arr.find(function(item){
  return item.id === 3;
});
console.log(result);



// 当函数中的条件满足时，会终止遍历并返回满足条件的这项下标
var resultElse = arr.findIndex(function(item){
  return item.id === 4;
});
console.log(resultElse)



// 原理：
Array.prototype.myFind = function (conditionFunc) {
  // var conditionFunc = function (item, index) { return item.id === 4 }
  for (var i = 0; i < this.length; i++) {
    if (conditionFunc(this[i], i)) {
      return this[i]
    }
  }
}

var ret = users.myFind(function (item, index) {
  return item.id === 2
})

console.log(ret)

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海