精华内容
下载资源
问答
  • 主要介绍了图解JS原型和原型链实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • JS中的原型和原型链图解

    万次阅读 多人点赞 2018-09-09 11:55:09
    JS中的原型和原型链 讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1、所有的引用类型(数组、函数、对象)可以自由扩展属性(除null以外)。 2、所有的引用类型都有一个’_ _ ...

    JS中的原型和原型链

    讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键

    1、所有的引用类型(数组、函数、对象)可以自由扩展属性(除null以外)。

    2、所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象)。

    3、所有的函数都有一个’prototype’属性(这也叫显式原型,它也是一个普通的对象)。

    4、所有引用类型,它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性。

    5、当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它的’_ _ proto_ _'属性(也就是它的构造函数的’prototype’属性)中去寻找。


    那么要点说完了,我们就根据这些要点来理解原型和原型链。

    原型

    我们先来看一个原型的例子。

    		//这是一个构造函数
    		function Foo(name,age){
    			this.name=name;
    			this.age=age;
    		}
    		/*根据要点3,所有的函数都有一个prototype属性,这个属性是一个对象
    		再根据要点1,所有的对象可以自由扩展属性
    		于是就有了以下写法*/
    		Foo.prototype={
    			// prototype对象里面又有其他的属性
    			showName:function(){
    				console.log("I'm "+this.name);//this是什么要看执行的时候谁调用了这个函数
    			},
    			showAge:function(){
    				console.log("And I'm "+this.age);//this是什么要看执行的时候谁调用了这个函数
    			}
    		}
    		var fn=new Foo('小明',19)
    		/*当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它
    		构造函数的'prototype'属性中去找*/
    		fn.showName(); //I'm 小明
    		fn.showAge(); //And I'm 19
    

    这就是原型,很好理解。那为什么要使用原型呢?

    试想如果我们要通过Foo()来创建很多很多个对象,如果我们是这样子写的话:

    	function Foo(name,age){
    			this.name=name;
    			this.age=age;
    			this.showName=function(){
    				console.log("I'm "+this.name);
    			}
    			this.showAge=function(){
    				console.log("And I'm "+this.age);
    			}
    		}
    

    那么我们创建出来的每一个对象,里面都有showName和showAge方法,这样就会占用很多的资源。
    而通过原型来实现的话,只需要在构造函数里面给属性赋值,而把方法写在Foo.prototype属性(这个属性是唯一的)里面。这样每个对象都可以使用prototype属性里面的showName、showAge方法,并且节省了不少的资源。


    原型链

    理解了原型,那么原型链就更好理解了。

    下面这段话可以帮助理解原型链

    根据要点5,当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它构造函数的’prototype’属性中去寻找。那又因为’prototype’属性是一个对象,所以它也有一个’_ _ proto_ _'属性。

    那么我们来看一个例子:

    		// 构造函数
    		function Foo(name,age){
    		 	this.name=name;
    		 	this.age=age;
    		}
    		Object.prototype.toString=function(){
    			//this是什么要看执行的时候谁调用了这个函数。
    			console.log("I'm "+this.name+" And I'm "+this.age);
    		}
    		var fn=new Foo('小明',19);
    		fn.toString(); //I'm 小明 And I'm 19
    		console.log(fn.toString===Foo.prototype.__proto__.toString); //true
    		
    		console.log(fn.__proto__ ===Foo.prototype)//true
    		console.log(Foo.prototype.__proto__===Object.prototype)//true
    		console.log(Object.prototype.__proto__===null)//true
    

    是不是觉得有点奇怪?我们来分析一下。
    这里写图片描述
    首先,fn的构造函数是Foo()。所以:
    fn._ _ proto _ _=== Foo.prototype
    又因为Foo.prototype是一个普通的对象,它的构造函数是Object,所以:
    Foo.prototype._ _ proto _ _=== Object.prototype
    通过上面的代码,我们知道这个toString()方法是在Object.prototype里面的,当调用这个对象的本身并不存在的方法时,它会一层一层地往上去找,一直到null为止。


    所以当fn调用toString()时,JS发现fn中没有这个方法,于是它就去Foo.prototype中去找,发现还是没有这个方法,然后就去Object.prototype中去找,找到了,就调用Object.prototype中的toString()方法。

    这就是原型链,fn能够调用Object.prototype中的方法正是因为存在原型链的机制。

    另外,在使用原型的时候,一般推荐将需要扩展的方法写在构造函数的prototype属性中,避免写在_ _ proto _ _属性里面。

    朋友们如果看懂了留个赞呗 😃,不懂可以在评论区留言。

    展开全文
  • 图解js原型对象、原型链

    千次阅读 2017-07-28 10:09:04
    在Javascript中,万物皆对象,所以想要理解原型对象和原型链,我们首先要对对象有深刻的理解,JS中对象大致可以分为两类,即:普通对象Object 和 函数对象Function。一般而言,通过new Function产生的对象是函数...

    在Javascript中,万物皆对象,所以想要理解原型对象和原型链,我们首先要对对象有深刻的理解,JS中对象大致可以分为两类,即:普通对象Object 和 函数对象Function。一般而言,通过new Function产生的对象是函数对象,其他对象都是普通对象。

    在开始本文之前,首先牢牢记住两个基本:①但凡创建了对象(无论是函数对象还是普通对象),都自带一个_proto_属性,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。②其中函数对象除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性——原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。然后基于这个两个基本,我们开始走代码


    1)普通对象的创建:

    var obj={

    x:1,

    y:2

    }

    当Obj一创建成功,就形成如图结构,在这个对象中,在上面的代码中我们没有为_proto_指定它的指向,所以为默认值

    通过对象字面量构造出的对象,其[[prototype]]指向Object.prototype


    我们进一步来创建一个复杂的对象

    var a= {
    x: 1,
    add: function (z) {
    return this.x + this.y + z
    }
    };
    var b = {
    y: 2,
    __proto__: a
    };

    var c = {
    y: 3,
    __proto__: a
    };

    b.add(4); // 7

    在该对象中,我们为b、c的_proto_作了明确指向,形成下图结构


    2)new 构造器的方式创建对象(function):

    function f(name,age,gender){

    this.name=name;

    this.age=age;

    this.gender=gender

    }

    var k=new f('小明',18,'男')


    通过new操作符调用的函数就是构造函数。k是f()的实例,实例的构造函数属性constructor指向构造函数。由构造函数构造的对象,其[[prototype]]指向其构造函数的prototype属性指向的对象。每个函数都有一个prototype属性,其所指向的对象带有constructor属性,这一属性指向函数自身。

    再来看一个稍微复杂的例子

    function F(y){
    this.y = y ;
    }

    Foo.prototype.x = 1;

    Foo.prototype.add = function(z){
    return this.x+this.y+z;
    };

    var b = new F(1);

    alert(b.add(2)); //4


    3)Object.create构造对象

    var obj={

    name:'小明',

    age:18,

    gender:'男'

    }

    var obj1=Object.create(obj)

    对象obj1的[[prototype]]指向对象obj



    用通俗的话来讲,通过原型链的延续我们可以实现Js中的继承,原型链的顶端是Object.prototype.__proto__,而Object.prototype是一切对象的原型,所以这个对象上所有的属性都能被我们使用,它不能有任何对象为原型,所以递归访问_proto_的终点Object.prototype.__proto__等于null

    如:

    var y=function(){}

    var x=new fn()

     

    属性

    Object.prototype.constructor  特定的函数,用于创建一个对象的原型Object.prototype.__proto__  指向当对象被实例化的时候,用作原型的对象。Object.prototype.__noSuchMethod__ 当未定义的对象成员被调用作方法的时候,允许定义并执行的函数。

    方法

    Object.prototype.__defineGetter__()  关联一个函数到一个属性。访问该函数时,执行该函数并返回其返回值。 Object.prototype.__defineSetter__()  关联一个函数到一个属性。设置该函数时,执行该修改属性的函数。 Object.prototype.__lookupGetter__()  返回使用 __defineGetter__ 定义的方法函数 。 Object.prototype.__lookupSetter__()  返回使用 __defineSetter__ 定义的方法函数。 Object.prototype.hasOwnProperty()返回一个布尔值 ,表示某个对象是否含有指定的属性,而且此属性非原型链继承的。 Object.prototype.isPrototypeOf()返回一个布尔值,表示指定的对象是否在本对象的原型链中。 Object.prototype.propertyIsEnumerable()判断指定属性是否可枚举,内部属性设置参见 ECMAScript DontEnum attribute Object.prototype.toSource() 返回字符串表示此对象的源代码形式,可以使用此字符串生成一个新的相同的对象。 Object.prototype.toLocaleString()直接调用 toString()方法。 Object.prototype.toString()返回对象的字符串表示。 Object.prototype.unwatch() 移除对象某个属性的监听。 Object.prototype.valueOf()返回指定对象的原始值。 Object.prototype.watch() 给对象的某个属性增加监听。


    展开全文
  • JS原型原型链图解

    2020-08-11 16:50:58
    但是由于其没有 类(class,ES6 引入了 class,但其只是语法糖)的概念,如何将所有对象联系起来就成立一个问题,于是就有了原型和原型链的概念。 每个实例对象( object )都有一个私有属性(称之为 proto )指向它...

    JS原型与原型链图解


    JavaScript 中除了基础类型外的数据类型,都是对象(引用类型)。但是由于其没有 类(class,ES6 引入了 class,但其只是语法糖)的概念,如何将所有对象联系起来就成立一个问题,于是就有了原型和原型链的概念。

    每个实例对象( object )都有一个私有属性(称之为 proto )指向它的构造函数的原型对象(prototype )。该原型对象也有一个自己的原型对象( proto ) ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。
    在这里插入图片描述

    JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。
    在这里插入图片描述
    例子:

    ['2', '2'].__proto__ === Array.prototype
    true
    Array.__proto__ === Function.prototype
    true
    Array.prototype.__proto__ === Object.prototype
    true
    Function.prototype.__proto__ === Object.prototype
    true
    Array.__proto__ === Object.__proto__
    true
    var a = {};
    a.__proto__ === Object.prototype
    true
    Object.__proto__ === Function.prototype
    true
    a.__proto__ === Function.prototype
    false
    
    function Person(){}
    var ins = new Person(); // 实例
    Person.prototype // 原型对象
    Person.prototype.constructor = Person;
    ins.__proto__ = Person.prototype;
    ins.constructor = Person;
    Person.prototype.__proto__ = Object.prototype;
    Object.prototype.constructor = Object;
    
    展开全文
  • js原型和原型链

    2020-02-14 15:12:08
    一、从图理解js原型于与原型链 图解: 红色部分 1、所有函数都有一个prototype指针,指向原型对象,prototype指针的意义是:当我们使用这个构造函数new出新对象的时候,新对象的原型是谁。 2、构造函数的prototype...

    一、从图理解js原型与原型链在这里插入图片描述

    图解:

    红色部分

    1、所有函数都有一个prototype指针,指向原型对象prototype指针的意义是:当我们使用这个构造函数new出新对象的时候,新对象的原型是谁。
    2、构造函数的prototype所指向的原型对象有一个constructor指针,指回构造函数constructor指针有助于我们找到一个对象的构造函数是谁
    3、__proto__每个对象都有,js在new一个对象的时候,会将它的__proto__指向构造函数的prototype指向的那个对象。 如果一个对象的__proto__指向了另一个对象,那么前者就继承了后者的所有属性。
    4、注意!__proto__才是真正连接原型链的东西,而prototype只是构造函数的一个指针属性而已。

    Foo原型~~~
    橙色部分

    1、橙色①②③
    Foo是一个函数,它的构造函数是js内部的function Function()Functionprototype指向了一个对象Function.prototype,因此Foo__proto__就指向了Function.prototype
    2、橙色④
    所有的函数都以function Function()为构造函数,因此,所有函数(包括function Function()和function Object())的__proto__都指向 Function.prototype 这个对象,这个对象中定义了所有函数都共有的方法,比如call()、apply()

    蓝色+绿色部分

    Function.prototype这个对象,它就是一个普通的对象,它的构造函数是js内置的function Object()function Object()prototype指向Object.prototype,因此Function.prototype.__proto__就指向Object.prototype这个对象中定义了所有对象共有的属性,比如hasOwnProperty()toString()
    同理,Foo.prototype和其他自定义的对象也是__proto__指向Object.prototype对象

    黑色部分

    Object.prototype就是原型链的终点,它的__proto__null,js查找属性时,如果到这里还没有找到,那就是undefined

    二、默认情况下,构造函数的原型的constructor属性是指向该构造函数本身的。若用对象字面量重写原型,则contructor属性不存在。故若要重写,必须给constructor重新赋值

    function Animal(){
            this.name="小猫";
            this.sex="母";
        }
    
        Animal.prototype={
            sleep:function (){
                return "会睡觉"
            }
        }
    

    在这里插入图片描述

    //重新赋值
    function Animal(){
            this.name="小猫";
            this.sex="母";
        }
    
        Animal.prototype={
        constructor:Animal,
            sleep:function (){
                return "会睡觉"
            }
        }
    
    

    在这里插入图片描述

    展开全文
  • 在我初学 JS 语言的继承机制原型和原型链的时候,我一直理解不了这种设计机制,再加上之前原有对 Java继承的理解,在学习 JS 继承机制的设计上踩了一个大坑,很多知识点前期都是死记硬背,无法真正的理解它的设计...
  • 图解JS原型链

    2018-09-30 04:56:18
    方法除了有_proto_属性外,还有自己特有的属性——prototype,称为原型属性,这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性方法(我们把这个对象叫做原型对象),原型对象中有个...
  • js原型链图解

    2020-02-14 13:30:56
    在了解原型链之前我们先了解一个概念 对象 一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象。这个prototype可以是一个对象或者null。 上面这段话不是我想出来的,是看到其他文章摘录下来,因为我...
  • JS原型链图解

    2017-01-21 11:29:59
    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览摘要。每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解。 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来...
  • 图解原型和原型链

    2019-07-24 11:10:35
    图解原型和原型链 原型和原型链JS 中不可避免需要碰到的知识点
  • 先跟各位小伙伴说一下,原型不难理解的,难的是运用,这节我们先去理解什么是原型,希望配合上图解,大家能很轻松理解,步入正题。 要彻底了解原型我们要知道以下几点: 我们所创建的每一个函数,解析器都会向函数...
  • js高程3》中对原型对象的解释 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性方法。也就是说,prototype...
  • 2,原型链 以下两张图阐述的非常详细,感谢尚硅谷课程:http://www.atguigu.com/ 1). Object的构造函数/原型/实例之间的关系(图解) var o1 = new Object(); var o2 = {}; 2).构造函数/原型/实例对象的关系...
  • JS原型链详细图解

    千次阅读 2018-04-29 19:48:27
    __proto__  prototype 的关系:__proto__ 是每个对象都有的属性;prototype是构造函数的属性;他们指向的是同一个对象。例如:function F(){};var f = new F();f.__proto__ === F.prototype //true...
  • js原型链(详细图解)

    2019-09-02 22:17:58
    原型链就是构造函数,原型对象,实例的关系 概念 每个构造函数都有一个指向该构造函数的原型对象(prototype) 每个构造函数的原型对象都有一个指向构造函数的指针(constructor) 每个原型内部都有一个指向其构造...
  • 直接上图!额(⊙o⊙)…,有点乱!不着急,让我们一步步来理解 首先先来明确这三个属性的定义: ...f1,f2是构造函数Foo()实例化出来的对象,f1.__proto__指向其构造函数的原型对象,其构造函数Foo.pro...
  • 图解JS中的原型链

    2019-07-07 16:21:19
    关于原型和原型链在学习JS中是避不开的一个知识点,这方面的知识有很多资料,这里就不做什么解释了,关于原型,我们应该要得知道有: 1. 构造函数中的```prototype```里面的属性和方法可以直接通过实例对象调用 2. ...
  • JS 原型与原型链

    2019-04-01 14:11:00
    图解:   一、普通对象 跟 函数对象  JavaScript 中,一切皆对象。但对象也有区别,分为 普通对象 跟 函数对象,Object Function 是JavaScript自带的函数对象。 var o1 = {}; var o2 =new Object(); ...
  • js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下。 1.prototype prototype:是一个函数的属性,每个函数中都会有一个...
  • 还是亲自动手敲敲,理解理解原型和原型链究竟是什么。 1、原型 (1)首先,什么是原型? 1>.定义:在JavaScript 中,每当定义一个对象的时候,对象中都会包含一些预定义的属性。其中每个函数对象都有一个pr...

空空如也

空空如也

1 2 3 4
收藏数 68
精华内容 27
热门标签
关键字:

js原型和原型链图解