美文网首页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的区别

相关文章

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

    屡战屡败,屡败屡战。生活总是给我们无穷尽的打击。磨我们的性子,让我们没有了棱角。 下面给大家分享一道面试中奖率12...

  • js里面的原型与原型链

    原型与原型链算是js里面的一个老生常谈的问题,面试的中奖率也是很高,他到底是个什么鬼 原型是什么?原型有什么作用?...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • 2022前端高频面试题

    JS相关 1.原型和原型链是什么 原型和原型链都是来源于对象而服务于对象的概念js中引用类型都是对象,对象就是属性...

  • JavaScript原型对象与原型链

    一、前言 原型和原型链是 JavaScript中不可避免需要碰到的知识点,在刚开始学习 JS 时,原型和原型链都是...

  • 深入javascript之原型和原型链

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

  • javascript中的原型链与继承

    javascript中的原型链与继承javascipt中的原型链和继承机制是这门语言所特有的,但js中的原型机制也...

  • 原型对象和原型链二者的关系

    开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)...

网友评论

  • 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