精华内容
下载资源
问答
  • 题目1.如何准确判断一个变量是数组类型 var arr = []; typeof arr; // obj typeof无法判断是不是数组 ... 1、验证原型对象 Object.getPrototypeof(obj) 要检测的类型的构造函数.prototype 2、验证构造函

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

            var arr = [];
            typeof arr; // obj typeof无法判断是不是数组
            使用 instanceof 方法
            arr instanceof Array // true
            
    		如何检测数据类型
            1、验证原型对象
            Object.getPrototypeof(obj) 要检测的类型的构造函数.prototype
            2、验证构造函数
            obj.constructor === 要检测的类型的构造函数
            objinstanceof === 要检测的类型的构造函数
            <!-- constructor属性返回对创建此对象的数组函数的引用。-->
            <--instanceof 判断函数的原型是否在对象的原型链上 -->
            3、检查内部属性class 每个对象中记录对象创建时使用的类型的属性一旦对象被创建,class属性就无法被修改
            Object.prototype.toString.call(obj)==='[object 要判断的类型的构造函数]
            4typeof 
            typeof 要检测数据类型
            typeof无法判断是不是数组 且无法检测nullnull则需要用===来检测
    

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

     	//动物
        function Animal() {
            this.eat = function() {
                console.log('animal eat')
            }
        }
        //狗
        function Dog() {
            this.bark = function() {
                console.log('dog bark')
            }
        }
        Dog.prototype = new Animal();
        // 二哈
        var hashiqi = new Dog();
    

    实例:封装 DOM 查询
    定义构造函数 Elem,属性封装成 id

    function Elem(id) {
        this.elem = document.getElementById(id) 
    } 
    Elem.prototype.html = function(val) {
        var elem = this.elem
        if (val) {
            elem.innerTHTML = val
            return this //链式操作
        } else {
            return elem.innerHTML
        } 
    }
    Elem.prototype.on = function(type, fn) {
        var elem = this.elem
        elem.addEventListener(type, fn) 
    }
    var div1 = new Elem('div1') 
    console.log(div1.html())
    
    var div1 = new Elem('detail-page')
    console.log(div1.html) // 打印出所有的 html
    
    // 将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’
    div1.html('<p>hello imooc</p>')
    div1.on('click', function() {
    	alert('clicked ')
    })
    

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

    1.创建一个新对象

    2.this 指向这个新对象

    3.执行代码,即对新对象赋值

    4.返回新对象

    function Student(name, age) {
        this.name = name
        this.age = age
        this.class = 'class';
        // return this // 每个构造函数都有这句代码,只是默认隐藏了
    }
    var stu1 = new Student('zhangsan', 20);
    

    大写字母开头一般都是构造函数

    new 的过程:
    1.创建一个新空对象

    2.var stu1 = new Foo(‘zhangsan’,20) 将参数传进去,函数中的 this 会变成空对象

    3.this.name = name;this.age = age 为赋值;return this 为实际的运行机制。.return 之后赋值给 stu1 ,stu1 具备了stu1.name = zhangsan、stu1.age = 20

    4.返回stu1这个对象

    构造函数(扩展)
    1.var a = {} 其实是 var a = new Object()的语法糖 (a 的构造函数是 Object 函数)

    2.var a = [] 其实是 var a = new Array()的语法糖 (a 的构造函数是 Array 函数)

    3.function Foo(){…}其实是 var Foo = new Function(…) (Foo 的构造函数是 Function 函数)

    4.使用 instanceof 判断一个函数是否是一个变量的构造函数 (判断一个变量是否为“数组”。变量 instanceof Array)

    题目4.编写一个函数出去数组中的重复值(原型链上编程).

    Function.phototype.unqie=function(){
        var newarr = this.filter(function(item, index, array) {
            return array.indexOf(item) === index;
        });
        return newarr;
    }
    

    注意:在原型链上编程时,函数不能行进传参,用this代替参数,即谁调用该函数,this为谁。

    展开全文
  • JS(原型和原型链)整理的面试题

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

    题目1.如何准确判断一个变量是数组类型
    在这里插入图片描述

    使用 instanceof 方法

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

    在这里插入图片描述

    实例:封装 DOM 查询

    定义构造函数 Elem,属性封装成 id
    在这里插入图片描述

    打印出所有的 html

    在这里插入图片描述

    将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’

    在这里插入图片描述

    链式操作

    在这里插入图片描述

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

    在这里插入图片描述

    1.创建一个新对象

    2.this 指向这个新对象

    3.执行代码,即对 this 赋值

    4.返回 this

    一、构造函数

    在这里插入图片描述

    大写字母开头一般都是构造函数

    new 的过程:

    1.var f = new Foo(‘zhangsan’,20) 将参数传进去,函数中的 this 会变成空对象

    2.this.name = name;this.age = age;this.class = ‘class-1’ 为赋值;return this 为实际的运行机制

    3.return 之后赋值给 f ,f 具备了 f.name = zhangsan、f.age = 20、f.class = ‘class-1’

    4.继续执行到 f1 ,则 f1.name = lisi、f1.age = 22、f1.class = ‘class-1’

    二、构造函数(扩展)

    1.var a = {} 其实是 var a = new Object()的语法糖 (a 的构造函数是 Object 函数)

    2.var a = [] 其实是 var a = new Array()的语法糖 (a 的构造函数是 Array 函数)

    3.function Foo(){…}其实是 var Foo = new Function(…) (Foo 的构造函数是 Function 函数)

    4.使用 instanceof 判断一个函数是否是一个变量的构造函数 (判断一个变量是否为“数组” 变量 instanceof Array)
    三、原型规则

    1.所有的引用类型(数组、对象、函数)都具有对象特性,即可自由扩展属性(除了“null”)
    在这里插入图片描述

    2.所有的引用类型(数组、对象、函数)都有一个 proto 属性(隐式原型属性),属性值是一个普通的对象

    在这里插入图片描述
    3.所有的函数,都有一个 prototype(显式原型)属性,属性值也是一个普通的对象

    在这里插入图片描述

    4. 所有的引用类型(数组、对象、函数), proto 属性值(隐式原型属性)指向它的构造函数的“prototype”属性值

    在这里插入图片描述

    当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的_proto_(即它的构造函数的 prototype(显式原型))中寻找

    5.在这里插入图片描述

    f.printName() 中 f 的(自身)属性是 name ,属性值是 zhangsan

    f.alertName() 中 f 的隐式原型正好指向 Foo 的显式原型 Foo.prototype, f 本身没有 alertName 的属性,会去其隐式原型中寻找,故执行f.alertName()时会执行Foo.prototype.alertName = function (),因为 Foo 扩展 function,故输出 zhangsan

    故通过对象的属性的形式来执行函数的时候,无论函数是自身的属性还是从原型中得到的属性, this 永远指向 f 自身,没有指向函数,故执行f.alertName()时,alert(this.name) 中的 this 就是 f 。

    6.循环对象自身的属性
    在这里插入图片描述

    if (f.hasOwnProperty(item)) 中遍历 f 时,判断遍历中的 item,是否可以通过 hasOwnProperty 验证,通过则表明它是 f 自身的属性,未通过则表明 是 f 通过原型获得的属性

    四、原型链

    在这里插入图片描述

    f.toString(),当这个对象没有这个属性的时候,去它自身的隐式原型中找,它自身的隐式原型就是它构造函数(Foo)的显式原型(Foo.prototype)但显式原型(Foo.prototype)中并没有 toString ;但显式原型(Foo.prototype)也是对象,也要在它的隐式原型中找,即在其构造函数 (Object )的显式原型中去找 toString. 故要在 f.proto(隐式原型)的.proto(隐式原型)中找,如图所示,故输出 null

    在这里插入图片描述

    方框为 构造函数,圆框为 对象,特例:Object.prototype 的 隐式原型是 null (JS避免死循环)

    五、instanceof

    判断 引用类型 属于哪个 构造函数 的方法
    在这里插入图片描述

    f instanceof FOO 的判断逻辑:f 是 Foo new出来的一个类型(正确)

    判断方式:f 的隐式原型(proto)一层一层往上,能否对应到 Foo.prototype(显式原型)
    试判断:f instance of Object (正确)

    见上图

    展开全文
  • 之前面试的时候遇到过原型和原型链方面的题目,具体的已经忘了,只记得当时回答的稀里糊涂,今天查了一些资料,把自己所理解的写出来,加深记忆。 1,前提  在js中,对象都有__proto__属性,一般这个是被称为...

      之前面试的时候遇到过原型和原型链方面的题目,具体的已经忘了,只记得当时回答的稀里糊涂,今天查了一些资料,把自己所理解的写出来,加深记忆。

     

    1,前提

      在js中,对象都有__proto__属性,一般这个是被称为隐式的原型,该隐式原型指向构造该对象的构造函数的原型。

      函数比较特殊,它除了和其他对象一样有__proto__属性,还有自己特有的属性----prototype,这个属性是一个指针,指向一个包含所有实例共享的属性和方法的对象,称之为原型对象。原型对象也有一个constructor属性,该属性指回该函数。

     

    2,题目分析

      网上找了一个题目,先分析一下

    var F = function () {}
    Object.prototype.a = function () {}
    Function.prototype.b = function () {}
    
    var f = new F()
    // 请问f有方法a  方法b吗

      f的__proto__指向F.prototype,F.prototype.__proto__指向Object.prototype,所以f 可以取到a方法, 由于f的原型链上没经过Function.prototype,所以取不到b方法。

     由于构造函数F是由Function new出来的,所以F.__proto__指向Function.prototype,所以F函数可以取到b方法。

     

      另外一道题目:

      

    function Person(){}
    
    let p1 = new Person()
    let p2 = new Person()
    let obj = {}

      具体的题目我忘记了,差不多就是写出 p1  p2  Person  Function   obj   Object等的原型链。

      p1:      __proto__ :  Person.prototype       

      p2:      __proto__ :  Person.prototype 

      Person  :         __proto__: Function.prototype,    prototype: Person.prototype

      Person.prototype :         __proto__ : Object.prototype ,  constructor: Person

      Function:       __proto__ : Function.prototype,   prototype: Function.prototype

      Function.Prototype:     __proto__ :  Object.prototype ,   constructor:  Function

      obj:    __proto__ : Object.prototype

      Object:   __proto__ : Function.prototype  ,   prototype:  Object.prototype

      Object.prototype:    __proto__ :  null  ,   constructor  :  Object

         

       具体的就是上面这些了,有两个点需要注意下

        1,Function.__proto__    ===     Function.prototype

          谨记上面的红字部分,每个对象都有__proto__,指向生成该对象的构造函数的原型。 这里Function是一个构造函数,那么它也是一个函数,既然是函数,那也是由Function这个构造函数生成的,也就是它自己本身,所以它的__proto__就指向它自己的prototype

          上面的说法是错误的,这里参考了一位大佬的话语: Function.prototype是引擎创造出来的对象,一开始就有了,又因为其他的构造函数都可以通过原型链找到Function.prototype,Function本身也是一个构造函数,为了不产生混乱,就将这两个联系到一起了。

        2,Object.__proto__  === Function.prototype

          Object是对象的构造函数,那么它也是一个函数,当然它的__proto__也是指向Function.prototype

     

      这里放一张关于这方面的经典的图

     

     

        

     

    转载于:https://www.cnblogs.com/wjyz/p/10219106.html

    展开全文
  • 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

    展开全文
  • JS的原型链是指原型与原型层层相连接的过程即为原型链。当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去...
  • 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 //默认有这一行
  • JavaScript 原型链和继承问题 JavaScript 中没有类的概念的,主要通过原型链来实现继承。通常情况下,继承意味着复制操作,然而 JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个...
  • 面试题原型链

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

    千次阅读 2019-03-31 16:03:31
    你去一家公司面试,前面面的都挺好,你觉得你对基础算法的了解很好,各种排序,红黑树,二叉树,深度/广度优先算法都答出来了,leetcode上的若干困难题目也都答上来了,然后面试官说,"那么好吧,介绍一下你对原型的...
  • 3.每一个对象(普通对象、prototype、实例、函数等)都具备:proto,属性值是当前实例所属类的原型 函数数据类型:普通函数、类(内置类/自定义类)、箭头函数 (都是Function的实例) 对象数据类型:普通对象、...

空空如也

空空如也

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

原型和原型链面试题