美文网首页web前端鸡汤文程序员
JS中的原型和原型链(面试中奖率120%)

JS中的原型和原型链(面试中奖率120%)

作者: 腿毛崩你一脸 | 来源:发表于2016-11-24 17:27 被阅读998次

    屡战屡败,屡败屡战。
    生活总是给我们无穷尽的打击。
    磨我们的性子,让我们没有了棱角。

    下面给大家分享一道面试中奖率120%的题:JS中的继承(至少我是被坑了6+)
    还是老规矩,先上代码

                function Base(name){
                    this.sex = 0;
                    this.name = name || 'base';
                    this.hello = function(){
                        console.log("hello " + name);
                    };
                }
                Base.prototype.say = function(){
                    console.log('name:'+this.name);
                };
                function Extend(name,num){
                    //让Base能初始化属性
                    Base.call(this,name);
                    this.num = num || 0;
                }
                //注意,这里是new Base()而不是Base.prototype
                //因为new Base()是新建了一个对象,这样可以不会影响到Base.prototype
                //否则如果直接操作Base.prototype,会污染Base.prototype
                Extend.prototype = new Base();
                //前面由于将prototype变为了new Base()所以构造方法默认是Base的
                //这里需要手动替换回来
                Extend.prototype.constructor = Extend;
    
                var one = new Extend('one',2);
                
                console.log(Extend.__proto__);//function () {}
                console.log(one instanceof Extend);//true
                console.log(one instanceof Base);//true
                console.log(one.constructor === Extend);//true
                console.log(one.__proto__ === Extend.prototype);//true
                
                
                console.log(one.name);//one
                console.log(one.sex);//0
                console.log(one.num);//2
                one.say();//name:one
                one.hello();//hello one
    

    面试只要写着一套绝对没有问题 perfect !
    这里再给大家解释几个概念:

    constroctor: 指向它的构造函数
    __proctor__: 指向产生它的原型
    call、apply和bindde 异同:
    同:
    1、都是用来改变函数的this对象的指向的。
    2、第一个参数都是this要指向的对象。
    3、都可以利用后续参数传参。
    异:
    1、call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
    2、call后面的参数与方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和方法中一一对应的
    具体写法:
    1、xw.say.call(xh)
    2、xw.say.apply(xh)
    3、xw.say.bind(xh)()
    
    原型链图.png

    完整的一条继承链:
    new Extend() -> Extend.prototype -> Base.prototype ->Object.prototype -> null
    盘古开天地,本来世界什么都没有,是null,后来衍生出来了Object.prototype,基于Object.prototype又产生了Function.prototype,他们都是函数对象
    new object()、new function()都是实例对象
    最后再上一个完整原型链图:

    完整原型链图.jpg

    refer:
    1、JavaScript筑基篇(三)->JS原型和原型链的理解
    2、javascript中apply、call和bind的区别

    相关文章

      网友评论

      • 19f530421f2f:最近在学js的高级教程,对于原型,原型链,this,函数声明,函数表达式一脸懵逼,关系太乱了,有时候整理出一套逻辑,转眼又被新的发现打乱了,有点心塞…
        腿毛崩你一脸:@桐叶飘飘这个相对来说逻辑性比较强,适合高端资深工程师
      • 腿毛崩你一脸:function Person (name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = 'man';
        }
        Person.prototype.sayHello = function () {
        console.log(this.name + " " + this.age);
        }
        function Student (name, age, grade, sex) {
        Person.call(this, name, age, sex);
        this.grade = grade;
        }
        Student.prototype = new Person();
        Student.prototype.constructor = Student;

        var s1 = new Student('zhangyu', 18, 98);
        console.log(s1.name);
        console.log(s1.age);
        console.log(s1.grade);
        console.log(s1.sex);
        s1.sayHello();
        sunningcarry:这个是组合继承,寄生式组合继承更有优势

      本文标题:JS中的原型和原型链(面试中奖率120%)

      本文链接:https://www.haomeiwen.com/subject/rwnbpttx.html