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

0.265字数 234阅读 2285

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

下面给大家分享一道面试中奖率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的区别

推荐阅读更多精彩内容