精华内容
下载资源
问答
  • function A() { } A.prototype.n = 1 var b = new A() A.prototype = { ... // A的原型对象被改变了,但是b的原型对象可没变 var c = new A() console.log(b.n, b.m, c.n, c.m) //1 underfined ...
      function A() { }
            A.prototype.n = 1
            var b = new A()
            A.prototype = {
                n: 2,
                m: 3
            }
            // A的原型对象被改变了,但是b的原型对象可没变
            var c = new A()
            console.log(b.n, b.m, c.n, c.m)  //1  underfined 2 3 
    

    图解
    2.

          function F () {}
            Object.prototype.a = function() {
                console.log("a()");
            }
            Function.prototype.b = function() {
                console.log("b()");
            }
    
            var f = new F()
            f.a()	//a()
            // f.b()    f.b不是一个函数  未捕获类型错误
            F.a()	//a()
            F.b()	b()
    
    展开全文
  • 题目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为谁。

    展开全文
  • 分析: 这道主要的用到了原型链,先查看自身是否有,没有找原型,原型也没有找Object,再找不到就是undefined。 这道中console.log(b.n); 在查找b.n是首先查找 b 对象自身有没有 n 属性,如果没有会去原型...

    一、查看下列代码,请问执行后弹出什么值
    var name = “World!”;
    (function () {
    var name;
    if (typeof name === ‘undefined’) {
    name = ‘Jack’;
    console.log(‘Goodbye’ + name);
    } else {
    console.log(‘hello’ + name);
    }
    })();

    分析:
    变量声明提升,JS代码分为存储模块和执行模块。
    在这里我们应该清楚,当函数内部变量与全局变量同名时 全局变量会被覆盖 因为js是单线程执行var name当前没有赋值 所以类型为undefined

    结果:Goodbye Jack

    二、考察Math、call、apply
    语句var arr=[a,b,c,d];执行后,数组arr中每项都是一个整数,下面得到其中最大整数语句正确的是哪几项?(选择多个)

    A. Math.max(arr)
    B. Math.max(arr[0], arr[1], arr[2], arr[3])
    C. Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])
    D. Math.max.apply(Math,arr)

    分析:
    Math.max(args…)传入参数是任意数量的值
    A 传入数组,所以错误
    B 可以
    C Function.call()可以传入任意多个参数,C正确
    D Function.apply()第二个参数以数组形式传递,D正确

    结果:B、C、D

    三、分析代码,最后执行结果为?
    var A = {n: 4399};
    var B = function(){this.n = 9999};
    var C = function(){var n = 8888};
    B.prototype = A;
    C.prototype = A;
    var b = new B();
    var c = new C();
    A.n++
    console.log(b.n);
    console.log(c.n);

    分析:

    这道题主要的用到了原型链,先查看自身是否有,没有找原型,原型也没有找Object,再找不到就是undefined。

    这道题中console.log(b.n);
    在查找b.n是首先查找 b 对象自身有没有 n 属性,如果没有会去原型(prototype)上查找
    当执行var b = new B()时,函数内部this.n=9999(此时this指向 b) 返回b对象,b对象有自身的n属性,所以返回 9999
    console.log(c.n);
    同理,当执行var c = new C()时,c对象没有自身的n属性,向上查找,找到原型 (prototype)上的 n 属性,因为 A.n++(此时对象A中的n为4400), 所以返回4400

    结果:9999 4400

    四、代码之后,arr的值是多少
    var arr=[{a:1},{}];
    arr.forEach(function(item,idx){
    item.b=idx;
    });

    分析:
    forEach()方法是对数组中的每一项运行给定函数,回调函数的参数item为数组当前项,idx为当前索引。
    这道题就是把数组每一项添加属性 b,并且属性 b 的值为当前项的数组索引值。

    还有就是,forEach()方法没有返回值,所以不能将 arr.foreach()像其他数组迭代方法那样赋值给某一个变量。

    结果:[{a:1,b:0},{b:1}]

    五、函数定义方式
    下列选项中,关于 js 函数定义方式,正确的是

    A. function add(a,b){return a+b;} 函数表达式
    B. var add=new Function(‘a’,’b’,’return a+b’) 函数表达式
    C. function add(a,b){return a+b;} 函数声明
    D. var add=function(a,b){return a+b;} 函数声明
    E. var add=new Function(‘a’,’b’,’return a+b’); 函数声明

    分析:
    js函数定义的几种方式

    定义方法 代码块
    函数声明 function sum(a,b){ return a+b }
    函数表达式 var sum = function(a,b){ return a+b }
    构造函数 var sum = new Function(‘a’,‘b’,‘return a+b’)//不推荐使用,影响函数解析性能
    六、this指向
    以下代码输出结果为?

    var myObject = {
    foo: “bar”,
    func: function() {
    var self = this;
    console.log(this.foo);
    console.log(self.foo);
    (function() {
    console.log(this.foo);
    console.log(self.foo);
    }());
    }
    };
    myObject.func();

    分析:
    这道理的关键就在于,方法/函数是由谁调用的,那么其内部的this就指向谁
    首先func是由myObject调用的,this指向 myObject。
    又因为var self = this;所以self指向myObject。
    这个立即执行匿名函数表达式是由window调用的,this指向 window 。
    立即执行匿名函数的作用域处于myObject.func的作用域中,在这个作用域找不到self变量,沿着作用域链向上查找self变量,找到了指向 myObject对象的self。

    所处域 this指向
    window window
    普通函数 window
    构造函数 指向类的实例对象
    定时器 window
    自调用函数 windown
    结果:bar bar undefined bar

    七、观察下列代码输出什么?
    假设 output 是一个函数,输出一行文本。下面的语句输出结果是什么?

    output(
    typeof (function() {
    output(“Hello World!”)
    })()
    );

    分析:
    在这里先提前说下,任何函数执行完一次,如果没有return返回值和声明变量,都会立即消失。
    这段代码的执行流程是,先立即执行匿名自调用函数,输出Hello World! ,函数执行后无返回值,则输出未定义

    结果:Hello World! undefined

    八、下列代码显示结果是
    var x = new Boolean(false);
    if (x) {
    alert(‘hi’);
    }
    var y = Boolean(0);
    if (y) {
    alert(‘hello’);
    }

    分析:
    这道题考察了JS的类型转换,这里的var x是一个对象,任何对象转为布尔值,都为得到 true。
    题目的第二部分,一定要注意 y = Boolean(0),而不是 y = new Boolean(0)。这两个有很大区别,用 new 调用构造函数会新建一个布尔对象,此处没有加 new,进行的是显示类型转换,所以就是false

    结果:hi

    九、假设val已经声明,可定义为任何值。则下面js代码有可能输出的结果为:
    var val;
    console.log('Value is ’ + (val != ‘0’) ? ‘define’ : ‘undefine’);

    分析:
    这道题考察了运算符的优先级,加号优先级高于三目运算。低于括号。 所以括号中无论真假 加上前边的字符串都为 true 三目运算为true是输出define

    结果: define

    十、BOM考察
    以下关于History对象的属性或方法描述正确的是( )
    A. go表示刷新当前页面。
    B. back回到浏览器载入历史URL地址列表的当前URL的前一个URL。
    C. forward转到浏览器载入历史URL地址列表的当前URL的下一个URL。
    D. length保存历史URL地址列表的长度信息。

    分析:

    属性 含义
    length 返回浏览器历史列表中的URL数量
    back() 加载 history 列表中的前一个URL
    forward() 加载 history 列表中的下一个URL
    go() 加载history列表中的某个具体页面。

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>... f.
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <script>
        function Foo() {
          getName = function(){ console.log(1); };
          return this;
        }
        
        Foo.getName = function() { console.log(2); };      
        Foo.prototype.getName = function(){ console.log(3); };
        var getName = function() { console.log(4); };
        function getName(){ console.log(5); };
    
        Foo.getName(); //2
        getName(); //4 执行全局对象的getName方法, 函数声明会先于表达式执行,所以全局对象的getName为 console.log(4)
        Foo().getName(); //1  Foo函数中将全局对象window上的getName方法修改为console.log(1)了
        getName(); //1  相当于执行window.getName()
        new Foo.getName(); // 2  
        new Foo().getName(); //3  new Foo()时执行Foo函数,返回实例对象,由于Foo()本身并没有this.getName()的方法,所以调用原型对象上的方法
    
     
        // 函数声明会先于函数表达式执行
        // sum1(1,2)
        // function sum1(a,b){return a+b;}
        // sum2(3,4)   //报错:Uncaught TypeError: sum2 is not a function at 1.原型和原型链_字节跳动.html:31
        // var sum2 = function(a,b) {return a+b;}
    
      </script>
    </body>
    </html>

    将Foo函数做稍微一点改变后,继续打印的结果:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <script>
    
        function Foo() {
          // 这里加了一个this
          this.getName = function(){ console.log(1); };
          return this;
        }
        Foo.getName = function() { console.log(2); };  // 相当于给Foo函数对象上添加了一个实例属性getName
        Foo.prototype.getName = function(){ console.log(3); };
        var getName = function() { console.log(4); };
        function getName(){ console.log(5); };
    
        Foo.getName(); // 2
        getName(); // 4
        Foo().getName(); // 1  此时this指向window,相当于修改全局对象上的getName方法为console.log(1)
        getName(); // 1 调用全部对象上的getName方法
        new Foo.getName(); // 2
        new Foo().getName(); // 1  new Foo()返回一个实例对象,此时实例对象上有this.getName方法,所以就直接调用,返回1
    
      </script>
    </body>
    </html>

     

    展开全文
  • 原型与原型链的常见面试题 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 分析一下:b.n 因为b是A的实例...
  • 之前面试的时候遇到过原型和原型链方面的题目,具体的已经忘了,只记得当时回答的稀里糊涂,今天查了一些资料,把自己所理解的写出来,加深记忆。 1,前提  在js中,对象都有__proto__属性,一般这个是被称为...
  • JS原型及其原型链(知识点及其面试题) 构造函数 //构造函数名 首位大写 function Foo(name,age){ this.name = name this.age = age this.class = 'class01' //return this //默认执行这一行 } //当new...
  • 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 //默认有这一行
  • function Foo(){ getName = function(){alert(1)}; return this; } Foo.getName = function(){alert(2)}; Foo.prototype.getName = function(){ale...
  • 上一篇文章原型链面试题答案: 1. 说说JS中的原型链以及最顶端是什么 访问一个属性时,会先在实例本身查找该属性,如果没有,就到其原型对象中去查找,若还是没有会去构造这个对象的构造函数中去查找,如果没有就...
  • JS(原型和原型链)整理的面试题

    千次阅读 2019-09-07 17:29:54
    写一个原型链继承的例子 实例:封装 DOM 查询 定义构造函数 Elem,属性封装成 id 打印出所有的 html 将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’ 链式操作 题目3.描述 new 一个对象的过程 1....
  • js面试题 隐式转换、原型链 1. 分析代码,请问执行结果是什么? var name = "World!"; (function () { var name; if (typeof name === 'undefined') { name = 'Jack'; console.log('Goodbye' + name);...
  • JS面试题原型链

    2020-07-19 07:13:29
    major) { super(name) this.major = major } teach() { console.log(`${this.name} 教授 ${this.major}`) } } //原型链 console.log(Student.prototype.__proto__) console.log(People.prototype) console.log...

空空如也

空空如也

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

js原型链面试题