精华内容
下载资源
问答
  • 面试题原型链

    2018-11-15 20:17:00
    也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__想上找,这就是原型链,当向上找找到Object.prototype原型链的顶端,所有对象从它继承了包括toString等等方法属性。,JS就是通过...

    简单理解就是原型组成的链,对象的__proto__是它的原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__想上找,这就是原型链,当向上找找到Object.prototype原型链的顶端,所有对象从它继承了包括toString等等方法和属性。,JS就是通过这个链条来实现的继承。 

    按照JS引擎的分析方式,在访问一个实例的属性或方法的时候,现在实例本身中找,如果没找到就去它的原型中找,还没找到就再往上找,直到找到。

     

    转载于:https://www.cnblogs.com/iamlhr/p/9965838.html

    展开全文
  • 原型和原型链面试题

    2021-05-26 16:31:20
    原型和原型链 javascript原型与原型链 每个函数都有一个prototype属性,被称为显示原型 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型...

    原型和原型链

    javascript原型与原型链
    1. 每个函数都有一个prototype属性,被称为显示原型
    2. 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型
    3. 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype
    4. 每个prototype原型都有一个constructor(看次chua克特)属性,指向它关联的构造函数。
    原型链

    获取对象属性时,如果对象本身没有这个属性,那就会去他的原型__proto__上去找,如果还查不到,就去找原型的原型,一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。

    展开全文
  • JS面试题原型和原型链

    千次阅读 2017-08-08 17:19:35
    写一个原型链继承的例子 描述new一个对象的过程 二、知识点 1.构造函数 function Foo(name, age){ this.name = name this.age = age this.class = 'class-1' // return this //默认有这一行

    一、 题目

    1. 如何准确判断一个变量是数组类型
    2. 写一个原型链继承的例子
    3. 描述new一个对象的过程

    二、知识点

    1.构造函数

        function Foo(name, age){
            this.name = name
            this.age = age
            this.class = 'class-1'
            // return this //默认有这一行
        }
        var f = new Foo('zhangsan', '20')
        //var f1 = new Foo('lisi', 22) //可创建多个对象

          特点:默认函数首字母大写,构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型。

    2.构造函数—扩展

          var a = {} 其实是 var a = new Object()的语法糖
          var a = [] 其实是 var a = new Array()的语法糖
          function Foo(){…} 其实是 var Foo = new Function(){…}
          使用instanceof判断一个函数是否是构造函数

    3.原型规则和示例
    原型规则是原型链的基础

    1. 所有引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(除‘null’以外)
    2. 所有引用类型(数组、对象、函数),都具一个_proto_ (隐式原型)属性,属性值是一个普通对象
    3. 所有函数,都有一个prototype(显式原型)属性,属性值也是一个普通对象
    4. 所有引用类型(数组、对象、函数),_proto_ (隐式原型)属性值指向它的构造函数的prototype(显式原型)属性值
    5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的_proto_ (即它的构造函数的prototype)中寻找
        var obj = {}; obj.a = 100;
        var arr = []; arr.a = 100;
        function fn(){}
        fn.a = 100;  // 所有引用类型都能拓展属性
    
        console.log(obj.__proto__)
        console.log(arr.__proto__)
        console.log(fn.__proto__)  //所有引用类型都有_proto_(隐式原型)属性
    
        console.log(fn.prototype) //所有函数,都有一个prototype(显式原型)属性
    
        console.log(obj.__proto__ === Object.prototype)// true 引用类型_proto_(隐式原型)属性值指向它的构造函数的prototype(显式原型)属性值
        //当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的*_proto_* (即它的构造函数的prototype)中寻找
        //构造函数
        function Foo(name, age){
            this.name = name;
        }
        Foo.prototype.alertName = function(){
            alert(this.name)
        }
        //创建实例
        var f = new Foo('zhangsan');
        f.printName = function(){
            console.log(this.name);
        }
        //测试
        f.printName(); //f自身有printName这个属性,所以直接可以调用
        f.alertName(); //f自身没有alertName这个属性,所以会去它的_proto_(即它的构造函数的prototype)中寻找

          tips:循环对象自身的属性时,建议加上hasOwnProperty来保证程序的健壮性

        var item;
        for(item in f){
            //高级浏览器已经在for in 中屏蔽了来自原型的属性
            //但是这里建议大家还是加上这个判断,保证程序的健壮性
            if(f.hasOwnProperty(item)){
                console.log(item)
            }
        }

    4.原型链
    还是采用上面构造函数的例子来解释原型链

        //构造函数
        function Foo(name, age){
            this.name = name;
        }
        Foo.prototype.alertName = function(){
            alert(this.name)
        }
        //创建实例
        var f = new Foo('zhangsan');
        f.printName = function(){
            console.log(this.name);
        }
        //测试
    
        f.toString(); //要去f._proto_._proto_中查找
        /*
         f自身没有toString这个属性, 那么f会去它的隐式原型_proto_(即它的构造函数的prototype)中寻找,而f的构    造函数也没有toString这个属性,那该往哪里找?
         原型规则中第二、三条提到:所有引用类型(数组、对象、函数),都具一个_proto_(隐式原型)属性,属性值是一个普通对象,意思f._proto_(f.prototype)是个对象
         f._proto_是个对象,那么该往f._proto_隐式原型中寻找,即f._proto_._proto_  (f._proto_寻找其对象的构造函数也就是Object)
        * */

    这里写图片描述

    5.instanceof

    用于判断引用类型属于哪个构造函数的方法

    f instanceof Foo的判断逻辑:
          f的proto一层一层往上,能否找到Foo.prototype
          再试着判断f instanceof Object

    三、解答

    1.如何准确判断一个变量是数组类型

        var arr = []
        arr instanceof Array //true
        typeof arr // Object typeof是无法判断是否是数组的

    2.写一个原型链继承的例子

    //写一个封装DOM的例子
        function Elem(id){
            this.elem = document.getElementById(id);
        }
        Elem.prototype.html = function (val) {
            var elem = this.elem;
            if(val){
                elem.innerHTML = val;
                return this;  //链式操作, 可有可无
            }else{
                return elem.innerHTML;
            }
        }
        Elem.prototype.on = function(type, fn){
            var elem = this.elem;
            elem.addEventListener(type, fn);
            return this;
        }
        var div1 = new Elem('div1');
        //console.log(div1.html())
        div1.html('<p>hello world<p>').on('click', function(){
            alert('clicked');
        }).html('<p>javascript<p>')

    3.描述new一个对象的过程

    1. 创建空对象;
        var obj = {};
    2. 设置新对象的constructor属性为构造函数的名称,设置新对象的_proto_属性指向构造函数的prototype对象;
        obj._proto_ = ClassA.prototype;

    3. 使用新对象调用函数,函数中的this被指向新实例对象:
        ClassA.call(obj);  //{}.构造函数();

    4. 将初始化完毕的新对象地址,保存到等号左边的变量中

    tips:若构造函数中返回this或返回值是基本类型(number、string、boolean、null、undefined)的值,则返回新实例对象;若返回值是引用类型的值,则实际返回值为这个引用类型。

    展开全文
  • JS的原型和原型链算是前端面试题的热门题目了,也是参加了几场面试,感觉好多次都被问到对原型和原型链的理解,所以今天也是索性把他给整理出来,一方面方便自己以后复习查看,另一方面也是给大家分享一下我对原型和...

    JS的原型和原型链算是前端面试题的热门题目了,也是参加了几场面试,感觉好多次都被问到对原型和原型链的理解,所以今天也是索性把他给整理出来,一方面方便自己以后复习查看,另一方面也是给大家分享一下我对原型和原型链的理解。

    ES6之前中并没有引入类(class)的概念,JavaScript并非通过类而是直接通过构造函数来创建实例。

    什么是原型

    每一个javascript对象(除null外)创建的时候,就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。

    这么说可能会有点抽象,举个例子吧

    function Person(age) {
        this.age = age       
    }
    Person.prototype.name = 'kavin'
    var person1 = new Person()
    console.log(person1.name)  //kavin

     就是说在通过构造函数创建实例的时候,如果去实例中找寻某个属性值的时候,如果他有的话就会直接输出,如果没有的话,就会去它的原型对象中去找。

    prototype:每个函数都有一个prototype属性,这个属性指向函数的原型对象。

    __proto__:这是每个对象(除null外)都会有的属性,叫做__proto__,这个属性会指向该对象的原型。

    constructor:每个原型都有一个constructor属性,指向该关联的构造函数。

    原型相关的知识考点一般就是围绕这张图,那怎么去验证这张图的正确性呢?

    console.log(Person===Person.prototype.constructor)  // true
    console.log(person.__proto__ == Person.prototype) // true
    console.log(person.__proto__.constructor == Person) // true
    console.log(person.constructor == Person) // true

     估计大家看到底四个的时候会有一些疑问了,为什么person.constructor == Person,其实还是前面所说到的,因为person没有这个属性的情况下,会从它的原型中去继承,这个时候第三个式子和第四个式子就是一样的了。

    什么时候会用到原型

    下面说一下什么时候会用到原型,还是像上边一样,举个简单的例子:

    function Person(name, age, gender) {
            this.name = name
            this.age = age
            this.gender = gender
            this.sayName = function () {
                console.log("我的名字叫" + this.name);
            }
        }

    这和上边看起来是没什么区别的,但是小差别就在这个sayName ,就是说每创建一个Person构造函数,在Person构造函数中,为每一个对象都添加了一个sayName方法,也就是说构造函数每执行一次就会创建一个新的sayName方法。

    一个还好,如果创建了一百个实例,一千个甚至上万个呢,这时候就体现出原型的好处了,我们可以把sayName方法放到构造函数的prototype上,这时候只需要创建一个,而且每一个实例都可以访问到。

    什么是原型链

    单的回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例,结果会怎样?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。

    简单的表达就是:上边说道如果实例没有一个属性,它会去它的原型中去找,但是如果它的原型中也没有这个属性呢,会停止寻找么,不一定,因为它的原型可能也有自己的原型,这个时候他就会去它的原型的原型中去寻找,这个时候会停下么,还是不一定,要看他原型的原型有没有原型,这样就形成了一条原型链。

    直到最后一个找不到原型时返回null

    展开全文
  • 3.每一个对象(普通对象、prototype、实例、函数等)都具备:proto,属性值是当前实例所属类的原型 函数数据类型:普通函数、类(内置类/自定义类)、箭头函数 (都是Function的实例) 对象数据类型:普通对象、...
  • 面试题原型链

    2020-04-16 16:55:38
    简单回顾一下构造函数、原型和实例的关系:每 个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型 对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果...
  • 面试题之原型、原型链继承

    千次阅读 2019-03-31 16:03:31
    你去一家公司面试,前面面的都挺好,你觉得你对基础算法的了解很好,各种排序,红黑树,二叉树,深度/广度优先算法都答出来了,leetcode上的若干困难题目也都答上来了,然后面试官说,"那么好吧,介绍一下你对原型的...
  • 题目1.如何准确判断一个变量是数组类型 var arr = []; typeof arr; // obj typeof无法判断是不是数组 ... 1、验证原型对象 Object.getPrototypeof(obj) 要检测的类型的构造函数.prototype 2、验证构造函
  • 一、题目 1、如何准确判断一个变量是数组类型? var array=[]; console.log(array instanceof Array);//true 判断引用类型的具体类型要用...2、写一个原型链继承的的例子 //封装一个DOM查询实例 functio
  • JavaScript 原型链和继承问题 JavaScript 中没有类的概念的,主要通过原型链来实现继承。通常情况下,继承意味着复制操作,然而 JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个...
  • 原型和原型链 原型 在JavaScript中有这么一句话万物皆可对象 在声明一个函数跟对象的时候 它在声明的时候就有一个原型对象prototype 这个属性指向函数的原型对象,并且这个属性是一个对象数据类型的值。 而...
  • 原型链 当调取一个对象的属性时,会先在本身查找,若无,就根据 __proto__找到构造原型,若无,继续往上找。最后会到达顶层Object prototype,它的__proto__指向null。 由__proto__ 串起的路径就是原型链 原型 是一...
  • JS(原型和原型链)整理的面试题

    千次阅读 2019-09-07 17:29:54
    写一个原型链继承的例子 实例:封装 DOM 查询 定义构造函数 Elem,属性封装成 id 打印出所有的 html 将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’ 链式操作 题目3.描述 new 一个对象的过程 1....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 459
精华内容 183
关键字:

面试题原型和原型链