精华内容
下载资源
问答
  • 2.写一个原型链继承的例子 //动物的构造函数,有一个方法eat function Animal() { this.eat = function () { console.log('animal eat'); } } //狗的构造函数,有一个方法bark function Dog() { thi

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

    使用instanceof进行判断,typeof是无法判断数组的。在ES6中新增了Array.isArray方法进行判断。

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

      //动物的构造函数,有一个方法eat
      function Animal() {
        this.eat = function () {
          console.log('animal eat');
        }
      }
      //狗的构造函数,有一个方法bark
      function Dog() {
        this.bark = function () {
          console.log('dog bark');
        }
      }
      //将Animal的实例赋值给Dog的原型对象
      Dog.prototype = new Animal()
      //new了一个Dog的实例对象,原型对象有eat方法,原型链上有bark方法
      var tudog = new Dog()
      console.log(tudog); //自身拥有bark方法,原型上拥有eat方法
    

    在上面这个例子中,Animal是一个构造函数,Dog也是一个构造函数,我们将Dog的原型对象变成了Animal的实例对象当我们new一个Dog的时候,先从本身继承了bark方法,同时继承了原型链Animal上的eat方法,当我们调用eat方法的时候,就会打印animal eat,是因为当在当前对象中的属性没有找到此方法,便会沿着原型链进行寻找知道Object.prototype这个大boss的原型对象上才终止,因为它的原型对象是null。

    3.请介绍一下什么是原型。

    原型是一个函数,其中的prototype是原型对象,这是开始就有的。在原型对象中其中定义了一些公用的属性和方法
    重点:
    1.每一个函数对象都有一个prototype属性,但是普通对象是没有的。
    2.prototype原型对象中有一个constructor构造函数,指向这个函数
    3.每个对象都有一个__proto__的内部属性,指向所对应的构造函数的原型对象,原型链是基于__proto__的。
    原型的主要作用就是实现继承与扩展对象。

    4.请介绍一下原型链。

    每一个函数都有一个prototype属性,成为原型,而原型的值也是一个对象,因此它也有自己的原型,这样就串起了一条原型链。原型链的链头是Object,他的prototype比较特殊,值为null。
    每个函数都有一个prototype属性,它是一个引用变量,默认指向一个空的object对象。当调用一个对象的函数或者是属性的时候,如果在当前对象里面找不到,那么就会在原型对象上逐层寻找。
    在javascript中,所有的对象都有一个__proto__的属性,它指向了当前对象的原型(prototype)。比如Animal是一个构造函数,它的本质就是一个函数,在js中函数是一等对象。
    可以说,原型链是原型对象创建过程中的历史记录。
    每一个对象都会在内部生成一个proto属性,当我们访问一个对象属性的时候,如果在这个对象中不存在这个属性,那么就会在它的proto属性指向的对象中去寻找。一层一层找下去,当最后找到Object.prototype的时候,这条原型链就到头了。(proto最终指向obj)
    我们来看一个例子巩固一下刚学的知识:

      var Person = function (name) {
        this.name = name; //给Person对象增加了一个name属性,值为传入的值。
      }
      Person.prototype.sayHi = function () {  //Person的原型对象增加了sayHi方法
        console.log("Hello! I am " + this.name + ".");
      }
    
      var joe = new Person("joe");  
      //new了一个实例会实现以下几步
      //1.创建一个空对象obj
      //2.设置这个空对象的__proto__的属性指向构造函数的prototype
      //3.让构造函数的this指向这个空对象,然后执行构造函数里面的代码
      //4.如果函数没有return语句,或是return基础类型,返回生成的对象
      //5.如果函数return了一个引用类型的数据,则最终返回这个引用类型
      var john = new Person("john");
    
      joe.sayHi(); //Hello! I am joe.
      john.sayHi(); //Hello! I am john.
    

    上面的代码中,首先声明了一个Person构造函数,其中的this.name到了每一个新的实例中都会执行一遍,相当于Object.name = name,第二步我们给它的原型对象上添加了一个sayHi的方法,在new实例时,将会有_proto_指向此对象,同时也继承了此方法。new实例后,首先生成一个空对象,接下来将对象的_proto_的属性指向了原型对象,接着将构造函数中的代码执行了一遍,因此在新的实例中,拥有了name这个属性,同时也继承了原构造函数prototype的方法,因为没有return一个引用类型,因此new实例获得的是我们生成的对象。
    从上面的描述中我们总结如下:原型定义了一些公用的属性和方法,利用原型新构建出来的对象实例会共享原型的所有属性和方法。
    原型链:原型链是原型对象创建过程中的历史记录。

    5.为什么方法放在prototype原型对象中而不放在构造函数的属性中

    放在Prototype中只需要在构造函数中实现一次加载,在new的实例中只需要_proto_指向此对象即可通过原型链使用此方法,而如果放在构造函数的属性中,每次new实例都需要调用一次,比较浪费性能。

    6.说一下instanceof的原理

    instanceof判断实例对象的_proto_属性,和构造函数的prototype属性,是不是同一个引用,所以只要是在原型链上的构造函数都是new实例的构造函数,都返回true,使用_proto_.constructor === M 进行判断实例是不是构造函数的实例,比Instanceof更严谨。

    展开全文
  • 关于原型链面试题

    2020-07-29 11:40:53
    Person ->实例 ->p,p中没有属性a与b 所以沿着原型链向上查找 p.__proto__指向Person.prototype 没找到, 继续向上找 p.__proto__.__proto__即Person.prototype.__proto__ 此时 Person.prototype的构造函数是Object...
    function A() {}
    function B(a) {this.a = a;}
    function C(a) { 
    if (a) {
      this.a = a;
     }
    }
    A.prototype.a = 1;
    B.prototype.a = 1;
    C.prototype.a = 1; 
    console.log(new A().a);
    console.log(new B().a);

    1,new A().a

    首先 new A()中没有 a属性 那么依照当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找原则去他的__proto__中查找 而他的__proto__指向的是他构造函数的prototype属性即 A.prototype.a所以 输出 1

    2,new B().a

    new B()对象的构造函数已经为它创建了一个a属性 这个a属性的值为传入的参数,但是此次没有为构造函数传入参数 所以最后输出为 undefined

    3,new C(2).a

    构造函数C判断了创建实例时有没有传入参数 如果传入 则a属性为传入的参数 如果没有参数则不创建,这里传入了2 所以最后输出2 如果这里没有传入参数 那么输出的就是对象实例原型链中的a属性的值 结果为1

    Function.prototype.a = 'a';
    Object.prototype.b = 'b';
    function Person(){};
    var p = new Person();
    console.log('p.a: '+ p.a);
    console.log('p.b: '+ p.b);
    console.log('Person.a: '+ Person.a);
    console.log('Person.b: '+ Person.b);

    Person ->实例 ->p,p中没有属性a与b 所以沿着原型链向上查找

    p.__proto__指向Person.prototype 没找到, 继续向上找

    p.__proto__.__proto__即Person.prototype.__proto__ 此时 Person.prototype的构造函数是Object

    Person.prototype.__proto__指向的就是Object.prototype

    p.b输出为‘b’

    p.a 在原型链中一直未找到 所以为undefined

    Person为构造函数他是内置对象Function的实例对象,即 Person.__proto__为 Function.prototype

    故Person.a 输出为"a"

    而在Person实例与__proto__中都没有找到b属性 此时会沿着原型链继续向上查找

    而Person.__proto__._proto_(即Function.prototype._proto_)为 Object.prototype

    所以 Person.b 输出为"b"

    引申

    1. 所有的引用类型(数组,对象,函数)都具有对象特性,即可自由扩展属性(除了null以外)
    2. 所有的引用类型(数组,对象,函数),都有一个__proto__属性,属性值是一个普通的对象 (隐式原型)
    3. 所有的函数,都有一个prototype属性,属性值也是一个普通的对象
    4. 所有的引用类型(数组,对象,函数),__proto__属性值值向他构造函数的prototype属性值
    5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找
    6. 实例生成时,会在内存中产生一块新的堆内存,对实例的一般操作将不影响其他实例,因为在堆内存里占据不同空间,互不影响;

    7. this的指向问题,常见的情况包含如下几种:

       作为对象方法时,谁调用就指向谁

       作为函数调用时,指向全局顶层变量window

       作为构造函数调用时,即new操作符生成实例时,构造函数中的this指向实例

       call和apply方法中,显示指定this的绑定为指定上下文

    8. 字面量的方式(也有资料将literal翻译为直接量,个人认为后一种翻译其实更直观更形象)进行对象和数组赋值(数组本质也是对象)时,都是引用,即在堆内存生成资源,在栈内存生成变量,然后变量指向资源的地址。

    9. 赋值语句对于原始值赋值和引用类型赋值时的细节区别.

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

    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。

    展开全文
  • 题目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为谁。

    展开全文
  • 原型与原型链的常见面试题

    万次阅读 2017-10-27 09:04:43
    //测试1 var A=function(){} A.prototype.n=1 var b=new A() A.prototype={ n:2, m:3 } var c=new A() console.log(b.n,b.m,c.n,c.m)//1,undefined,2,3 //测试2 var F=function(){}; Object....
  • JavaScript 原型链和继承面试题

    千次阅读 2020-10-29 02:00:37
    JavaScript 原型链和继承问题 JavaScript 中没有类的概念的,主要通过原型链来实现继承。通常情况下,继承意味着复制操作,然而 JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个...
  • 前端面试题:JS中的原型和原型链

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

    千次阅读 2019-06-27 12:12:28
    创建对象有几种方法 字面量 //字面量 var o1 = {name:'o1'} var o2 = new Object({name:'o2'}) //构造函数 var M = function(name){ this.name = name ...// Object.create Object.create是用原型链的方...
  • 之前面试的时候遇到过原型和原型链方面的题目,具体的已经忘了,只记得当时回答的稀里糊涂,今天查了一些资料,把自己所理解的写出来,加深记忆。 1,前提  在js中,对象都有__proto__属性,一般这个是被称为...
  • 原型和原型链理解:(面试题) 原型:每个函数都有 prototype 属性,该属性指向原型对象;使用原型对象的好处是所有对象实例共享它所包含的属性和方法。 原型链:主要解决了继承的问题;每个对象都拥有一个原型对象...
  • JS的原型链是指原型与原型层层相连接的过程即为原型链。当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去...
  • 金三银四的旺季即将拉开序幕,这段时间有朋友陆陆续续去面试,和她们沟通发现,最高频出现问题就是:谈谈你对原型和原型链理解? 无形之刃 最为致命。 ——影流之主 一个看似最最最基础的面试题,但是这送分题,...
  • Java面试题大全(2020版)

    万次阅读 多人点赞 2019-11-26 11:59:06
    发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java ...
  • 什么是原型链? 答: 所有的JS对象都有一个prototype属性,指向它的原型对象。当试图访问一个对象的属性时,如果没有在该对象找到,它还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一...
  • 【JS面试题原型链

    2020-07-19 07:13:29
    有了图就可以理解下面代码: //原型链 console.log(Student.prototype.__proto__) console.log(People.prototype) console.log(People.prototype === Student.prototype.__proto__) 当访问xialuo.name,是直接获取...
  • 原型的概念:每一个javascript对象(除null外)创建的时候,就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。 让我们用一张图表示构造函数和实例原型之间的关系: funct...
  • 原型和原型链 原型 在JavaScript中有这么一句话万物皆可对象 在声明一个函数跟对象的时候 它在声明的时候就有一个原型对象prototype 这个属性指向函数的原型对象,并且这个属性是一个对象数据类型的值。 而...
  • 对于js的原型和原型链理解

    万次阅读 多人点赞 2019-06-23 22:20:23
    一、原型与原型链 JavaScript是一门基于原型的语言,在软件设计模式中,有一种模式叫做原型模式,JavaScript正是利用这种模式而被创建出来 原型模式是用于创建重复的对象,同时又能保证性能,这种类型的设计模式...
  • 近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 特别高的薪资都是直接技术面试或者是 现场编程 总结很多人的面试题,后期会对于单个知识点再说笔记详细讲解。 部分都是百度的答案,...
  • 面试中的重要问题,我遇到过的面试问题中,原型链被问到的几率特别大,所以整理一个笔记记录下来我对原型链理解。 每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针...
  • Function.prototype.a = 'a';...原型链这块一直我理解的一直都不是很透彻,所以面试官问到的时候我听了一脸懵QAQ 所以下决心要把原型链的相关知识恶补一下。 首先看JS高设中对原型链的描述: ...
  • 在我初学 JS 语言的继承机制原型和原型链的时候,我一直理解不了这种设计机制,再加上之前原有对 Java继承的理解,在学习 JS 继承机制的设计上踩了一个大坑,很多知识点前期都是死记硬背,无法真正的理解它的设计...
  • JS面试—原型和原型链

    千次阅读 2019-05-11 09:31:49
    2、写一个原型链继承的例子 3、描述new一个对象的过程 4、zepto (或其他框架)源码中如何使用原型链 二、知识点 2.1 构造函数 2.2 构造函数——拓展 2.3 原型规则和示例 2.4 原型链 2.5 instanceof 一、题目...
  • 面试中问到了关于原型链的什么 我的回答如下: 所有的JS对象都有一个prototype属性,指向它的原型对象。当试图访问一个对象的属性时,如果没有在该对象上找到,它还会搜寻该对象的原型,以及该对象的原型的原型,...
  • 2、原型机原型链 3、类的继承 4、原始类型和引用类型的区别 5、每一个知识点都可以拿出来做单独的专题研究。 解题需要的知识点细节 1.构造函数,都有一个prototype属性,指向构造函数的原型对象,...
  • 面试:原型和原型链

    千次阅读 2019-06-27 10:04:27
    1.什么是原型 简单来说就是有一个构造函数,当用这个构造函数new 一个实例出来的时候,这个实例的原型就是这个构造函数 function Person(name,age){ this.name=name; this.age=age; } var person=new Person('...
  • 原型、原型链与原型继承也是一个老生常谈的问题了,可以说js原型弄明白了,那么学习js就得了一种质的飞跃,今天我们就来看看这个在前端面试中的高频考题究竟是怎么一回事。 一、原型 要说原型,我画了上面那张图...
  • 用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学...每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属...
  • 前端面试——作用域链、原型链、闭包

    万次阅读 多人点赞 2018-09-06 16:39:20
    1.作用域链、原型、原型链、闭包? https://www.cnblogs.com/pssp/p/5204324.html https://cnodejs.org/topic/59662f6dbda29e0f7480235b https://blog.csdn.net/zhizhiC/article/details/79734611 结论 作用域...
  • js面试题

    千次阅读 多人点赞 2019-04-09 19:42:32
    介绍 JavaScript 的原型,原型链?有什么特点? 原型: JavaScript 的所有对象中都包含了一个 [proto] 内部属性,这个属性所对应的就是该对象的原型 JavaScript 的函数对象,除了原型 [proto] 之外,还预置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,587
精华内容 5,434
关键字:

原型链的理解面试题