继承的几种方式

Posted 2020-07-27 云上丶无忧

      一、  call, apply：

 

        都是用来改变this的指向 不同之处是前者传递参数是一个一个传递 后者是一个数组

        一般情况下 我们只会用call和apply实现属性的继承 不会实现方法的继承

    prototype:

        每一个函数都有一个prototyp属性 这个属性指向一个对象 这个对象叫做原型对象

        原型对象里面有2个属性

        constructor:

        __proto__

    constructor:构造器

        指向创建自己的那个构造函数

    __proto__：

        每一个对象都有一个__proto__属性 这个属性指向一个对象这个对象是原型对象

    原型链

        由__proto__组成的链条叫做原型链
二、原型拷贝：

function Person(name,age,sex){

    this.name = name;

    this.age = age;

    this.sex= sex;    

}

Person.prototype.sleep = function(){}

Person.prototype.play = function(){}

Person.prototype.eat = function(){

    console.log("1122")

}    

var p1 = new Person()

function Man(beard,larynx,name,age,sex){

    Person.apply(this,[name,age,sex])

    this.beard = beard;

    this.larynx = larynx;

}

for(var key in Person.prototype){

    Man.prototype[key] = Person.prototype[key]

}

Man.prototype.work = function(){}

Man.prototype.eat = function(){

    console.log(‘3344‘)

}

//实例化

var chenliang = new Man(10,"很大","陈亮","40","男");

console.log(chenliang)

console.log([Person])

chenliang.eat()

p1.eat();

三、原型链继承：

function Person(name,age,sex){

    this.name = name;

    this.age = age;

    this.sex= sex;

    

}

Person.prototype.sleep = function(){}

Person.prototype.play = function(){}

Person.prototype.eat = function(){

    console.log("1122")

}

        

var p1 = new Person()

function Man(beard,larynx,name,age,sex){

    Person.apply(this,[name,age,sex])

    this.beard = beard;

    this.larynx = larynx;

}

/*

    1、多了很多无用的属性---->直接使用原型链继承的时候可能把属性和方法都继承过来了

    用原型链继承的时候可能把属性放在了prototype上面

    2、少了一个constructor

*/

Man.prototype = new Person();

Man.prototype.work = function(){}

//实例化

var chenliang = new Man(10,"很大","陈亮","40","男");

console.log(chenliang)

console.log(p1)

四、混合继承

        //人类

function Person(name,age,sex){

    this.name = name;

    this.age = age;

    this.sex= sex;

}

Person.prototype.sleep = function(){}

Person.prototype.play = function(){}

Person.prototype.eat = function(){

    console.log("1122")

}

        

var p1 = new Person()

//p1.__proto__:原型对象 == Person.prototype 原型对象

function Man(beard,larynx,name,age,sex){

    Person.apply(this,[name,age,sex])

    this.beard = beard;

    this.larynx = larynx;

}

/*

    1、多了很多无用的属性

    2、少了一个constructor

五、寄生继承

        //人类

function Person(name,age,sex){

    this.name = name;

    this.age = age;

    this.sex= sex;

    

}

Person.prototype.sleep = function(){}

Person.prototype.play = function(){}

Person.prototype.eat = function(){

    console.log("1122")

}

        

var p1 = new Person()

function Man(beard,larynx,name,age,sex){

    Person.apply(this,[name,age,sex])

    this.beard = beard;

    this.larynx = larynx;

}

/*

    1、多了很多无用的属性

    2、少了一个constructor

*/

function fn(){}

fn.prototype = Person.prototype;

//原型链继承

Man.prototype = new fn();

Man.prototype.constructor = Man;

Man.prototype.work = function(){}

//实例化

var chenliang = new Man(10,"很大","陈亮","40","男");

console.log(chenliang)

console.log(p1)

六、ES6类继承
class Person{

    //属性

    constructor(name,age){

        this.name = name;

        this.age = age;

    }

    eat(){

        console.log(‘111‘)

    }

    show(){

        console.log(‘222‘)

    }

}

//ES6的继承

class Man extends Person{

    constructor(beard,name,age){

        super(name,age)

        this.beard = beard;

    }

    work(){}

}

var p2 = new Man(10,"陈亮",20);

console.log(p2)



闭包

闭包：

        什么是闭包？

            闭包就是能够读取其他函数内部变量的函数

        闭包的危害

            因为闭包它不会自动被销毁会在内存中一直占用，所以会非常耗费性能

            同时在IE浏览器下可能会造成内存溢出 当不用闭包的时候要将其摧毁

        闭包的用途

            1、可以访问其他函数内部的变量或者方法 (可以访问局部变量)

            2、在循环中可以保持i的值

            

        选择题

    

    什么是垃圾回收机制

        当一个函数运行完毕以后，如果内部的变量或者方法没有在外部(全局)进行调用的话，这个函数就会被立即销毁 下次在调用的时候里面所有的变量都会进行重置

        

        如果当前函数的变量或者方法在全局进行了调用的话，那么这个函数不会被销毁而是一直在内存中存在

        function fn(){

            var a = 10;

            return function(){

                return a;

            }

        }

        var b = fn();

        var c = b();

        console.log(c);//10

        b = function(){

                return a;

            }

    <ul id="list">

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

    </ul>

</body>

</html>

<script>

var aLi = document.querySelectorAll("#list>li");

/*for(var i=0;i<aLi.length;i++){

    aLi[i].index = i;

    aLi[i].onclick = function(){

        alert(this.index)

    }

}*/

//闭包的第二种用法

for(var i=0;i<aLi.length;i++){

    (function(i){

        //预处理事件

        aLi[i].onclick = function(){

            alert(i)

        }

    })(i)

}