精华内容
下载资源
问答
  • 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()
    
    展开全文
  • 【WEB前端-面试JS原型链

    原型:指的是prototype,每一个创建的函数都有prototype(原型)属性。
    原型链:当我们创建一个实例之后,每个实例都会有一个__proto__属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有__proto__属性,这样一层一层往上找就形成了原型链。

    每一个创建的函数都有prototype(原型)属性,这个属性是一个指针,指向一个对象。prototype是通过调用构造函数而创建的那个对象实例的原型对象。

    原型对象的好处:可以让所有的对象实例共享它所包含的属性和方法。不同实例上的同名函数相等。

    与之相对的是构造函数方法。构造函数方法,需要在每一个实例中都创建一次,因此,不同实例上的同名函数不相等。
    【函数是对象,函数名是指针】

    1. 理解原型对象

    创建一个新函数的同时会为这个函数创建一个prototype属性,这个属性指向函数的原型对象。默认情况下,所有原型对象都有一个constructor(构造函数)属性,该属性包含一个指向prototype属性所在函数的指针。通过构造函数可以为原型对象添加其他属性和方法。

    2. 原型链

    ​ 每一个实例对象又有一个__proto__属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有__proto__属性,这样一层一层往上找就形成了原型链。
    在这里插入图片描述
    当使用一个包含所有属性和方法的对象字面量来重写整个原型对象时,注意添加constructor属性,指向构造函数。

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

    展开全文
  • 在介绍原型和原型链之前,我们有必要先复习一下构造函数的知识。 1、原型: 在JavaScript中,每当定义一个函数数据类型(普通函数、类)时候,都会天生自带一个prototype属性,这个属性指向函数的原型对象,并且这个...

    前言:

    与大部分面向对象语言不同,ES6之前中并没有引入类(class)的概念,JavaScript并非通过类而是直接通过构造函数来创建实例。在介绍原型和原型链之前,我们有必要先复习一下构造函数的知识。

    1、原型:

    function Person(name) {
    			this.name = name;
    		}
    		Person.prototype.say = function() {
    			console.log('hello ' + this.name);
    		}
    		let p1 = new Person('张三');
    		let p2 = new Person('李四');p1.say(); 
    		// hello 张三 p2.say(); 
    		// hello 李四 console.log(p1.say === p2.say); 
    		// true
    

    **这里的原型就是 ---- Person.prototype **

    函数有原型,函数有一个属性叫prototype,函数的这个原型指向一个对象,这个对象叫原型对象。这个原型对象有一个constructor属性,指向这个函数本身。
    js规定每一个函数都有一个proto属性,而且对应的是自身的原型,

    在js函数对象除了proto之外还有prototype属性,当函数作为构造函数创建实例时,该属性就被作为实例对象的原型,并且这个属性是一个对象数据类型的值。

    一张图就可以表示构造函数和实例原型之间的关系:
    在这里插入图片描述
    原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。


    2、原型链:

    当一个对象调用自身不存在的属性和方法时就会去自己的proto的前辈prototype对象上去找,如果没找到就会去prototype的前辈上去找 直到找到或者返回undefiend 这个查找的过程就是原型链

    举例说明:person → Person → Object ,普通人继承人类,人类继承对象类

    我们可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性;使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true

    顶层对象:

    最顶层的原型对象:object.prototype object.prototype最常用的两种方法(tostring 、valueof)

    拓展

    隐式原型 (proto):隐式原型的作用是用来构成原型链,实现基于原型的继承

    显式原型(prototype):用来实现基于原型的继承与属性的共享

    展开全文
  • js 原型链

    2019-04-03 14:36:25
    JS中原型链的概念刚开始可能一直...在面试时,面试官可能会通过对象的创建方式来引出原型链相关的问题: 那么创建对象的方式主要有以下几种: 第一种: 字面量 var Obj1 = {name:”o1”}; var Obj2 = new Object(...
  • js原型链

    2018-05-09 18:36:00
    js中万物都是对象,而对象具有__proto__属性(隐式原型链),一个对象的隐式原型指向构造该对象的构造函数的原型,保证了实例可以访问到构造函数原型中定义的属性跟方法 Function是个特殊的对象,除了有上面的__...
  • 原型与原型链的常见面试题 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__属性,一般这个是被称为...
  • (1)显式原型 每个函数在定义的时候都有一个显式原型prototype,默认指向一个空的Object对象。 function People() { //this.prototype = {} } (2)隐式原型 每个对象实例都有一个隐式原型__proto__,指向创建它...
  • JS原型及其原型链(知识点及其面试题) 构造函数 //构造函数名 首位大写 function Foo(name,age){ this.name = name this.age = age this.class = 'class01' //return this //默认执行这一行 } //当new...
  • JS原型原型链

    2020-09-15 00:58:24
    js原型原型链是前端面试中经常遇到的问题,所以自己好好梳理了一下思路,怕自己掉链子。 JS原型 官话:Javascript规定,每一个函数都有一个prototype对象属性,指向另一个对象(原型链上面的)。 prototype(对象...
  • 分析: 这道题主要的用到了原型链,先查看自身是否有,没有找原型,原型也没有找Object,再找不到就是undefined。 这道题中console.log(b.n); 在查找b.n是首先查找 b 对象自身有没有 n 属性,如果没有会去原型...
  • 继承、原型、原型链概念 首先要知道两个概念: 几乎所有函数有 prototype 属性,几乎所有对象有 __proto__ 属性。(注意几乎所有这个词,例如:Obejct.create(null) 创建的对象没有任何属性) 实例对象的 __...
  • JS原型链详解

    2018-01-22 10:06:00
    最近面试被问到了就决定好好深入理解原型链 对象 要清楚原型链,首先要弄清楚对象: 普通对象 最普通的对象:有__proto__属性(指向其原型链),没有prototype属性。 原型对象(person....
  • 原型、原型链也是一个老生常谈的问题了,可以说js原型弄明白了,那么学习js就得了一种质的飞跃,今天我们就来看看这个在前端面试中的高频考题究竟是怎么一回事。 一、原型 JavaScript 常被描述为一种基于原型的语言...
  • JS面试—原型和原型链

    千次阅读 2019-05-11 09:31:49
    2、写一个原型链继承的例子 3、描述new一个对象的过程 4、zepto (或其他框架)源码中如何使用原型链 二、知识点 2.1 构造函数 2.2 构造函数——拓展 2.3 原型规则和示例 2.4 原型链 2.5 instanceof 一、题目...
  • JS原型原型链

    2018-07-04 13:37:39
    原型和原型链js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型链会是面试中必不可少的话题。看完此篇文章一定会让你对原型,原型链有深刻全面的了解。深入...
  • 在我初学 JS 语言的继承机制原型和原型链的时候,我一直理解不了这种设计机制,再加上之前原有对 Java继承的理解,在学习 JS 继承机制的设计上踩了一个大坑,很多知识点前期都是死记硬背,无法真正的理解它的设计...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>... f.

空空如也

空空如也

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

js原型链面试