精华内容
下载资源
问答
  • 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 _ _属性里面。

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

    展开全文
  • 介绍了javascript中的原型和原型链,需要的朋友可以参考下
  • 深入javascript之原型和原型链

    万次阅读 多人点赞 2018-03-02 21:22:27
    原型和原型链js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型链会是面试必不可少的话题。看完此篇文章一定会让你对原型,原型链有深刻全面的了解。 深入...

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型链会是面试中必不可少的话题。看完此篇文章一定会让你对原型,原型链有深刻全面的了解。

    深入系列:深入javascript之作用域

    深入系列:深入javascript之执行上下文

     

    一,函数对象

                    所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型)

                    所有函数拥有prototype属性(显式原型)(仅限函数)

                    原型对象:拥有prototype属性的对象,在定义函数时就被创建

    二,构造函数

                    先复习下构造函数

    //创建构造函数
            function Word(words){
                this.words = words;
            }
            Word.prototype = {
                alert(){
                    alert(this.words);
                }
            }
            //创建实例
            var w = new Word("hello world");
            w.print = function(){
                console.log(this.words);
                console.log(this);  //Person对象
            }
            w.print();  //hello world
            w.alert();  //hello world

                    print()方法是w实例本身具有的方法,所以w.print()打印hello world;alert()不属于w实例的方法,属于构造函数的方法,w.alert()也会打印hello world,因为实例继承构造函数的方法。

                    实例w的隐式原型指向它构造函数的显式原型,指向的意思是恒等于

             w.__proto__ === Word.prototype
    

                    当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性:

                    w本身没有alert()方法,所以会去Word()的显式原型中调用alert(),即实例继承构造函数的方法。        

    三,原型和原型链

            Function.prototype.a = "a";
            Object.prototype.b = "b";
            function Person(){}
            console.log(Person);    //function Person()
            let p = new Person();
            console.log(p);         //Person {} 对象
            console.log(p.a);       //undefined
            console.log(p.b);       //b

                    想一想p.a打印结果为undefined,p.b结果为b

                    解析:

                    p是Person()的实例,是一个Person对象,它拥有一个属性值__proto__,并且__proto__是一个对象,包含两个属性值constructor和__proto__

            console.log(p.__proto__.constructor);   //function Person(){}
            console.log(p.__proto__.__proto__);     //对象{},拥有很多属性值
    

                    我们会发现p.__proto__.constructor返回的结果为构造函数本身,p.__proto__.__proto__有很多参数

           我们调用constructor属性,p.___proto__.__proto__.constructor得到拥有多个参数的Object()函数,Person.prototype的隐式原型的constructor指向Object(),即Person.prototype.__proto__.constructor == Object()

                 从p.__proto__.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p.___proto__.__proto__== Object.prototype

                    所以p.b打印结果为b,p没有b属性,会一直通过__proto__向上查找,最后当查找到Object.prototype时找到,最后打印出b,向上查找过程中,得到的是Object.prototype,而不是Function.prototype,找不到a属性,所以结果为undefined,这就是原型链,通过__proto__向上进行查找,最终到null结束

            console.log(p.__proto__.__proto__.__proto__);   //null
            console.log(Object.prototype.__proto__);        //null

                    大家理解刚才的过程,相信下面这些应该也都明白

            //Function
            function Function(){}
            console.log(Function);  //Function()
            console.log(Function.prototype.constructor);    //Function()
            console.log(Function.prototype.__proto__);      //Object.prototype
            console.log(Function.prototype.__proto__.__proto__);    //NULL
            console.log(Function.prototype.__proto__.constructor);  //Object()
            console.log(Function.prototype.__proto__ === Object.prototype); //true

                    总结:

                    1.查找属性,如果本身没有,则会去__proto__中查找,也就是构造函数的显式原型中查找,如果构造函数中也没有该属性,因为构造函数也是对象,也有__proto__,那么会去它的显式原型中查找,一直到null,如果没有则返回undefined

                    2.p.__proto__.constructor  == function Person(){}

                    3.p.___proto__.__proto__== Object.prototype

                    4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null         

                    5.通过__proto__形成原型链而非protrotype

     

                    最后附上一张图,大家阅读完之后,看图应该可以很容易理解

    展开全文
  • js中原型链和关于原型链的对象属性查找规则

    在了解原型链之前需要先知道什么是原型,什么是原型继承。

    1,原型:

    每一个函数都会有一个prototype属性,当然也就包括构造函数这种特殊的函数在内,我们可以把整个prototype就叫做原型。

    2.原型继承

    在js中原型继承是实现继承的一种方式,其他的实现继承的方式还有使用call函数apply函数等。实现原型继承的方式是将上级函数实例赋值给下级函数的原型。

    3.原型链

    在js中由于原型继承的关系,就会产生一种叫做原型链的东西,那么到底什么是原型链呢?
         原型链:简单来说就是函数原型通过继承关系联系在一起,形成的链式结构就被叫做原型链。简单来说就是在实现原型继承的时候,会将下级函数的原型和上级函数的实例联系起来,那么多个构造函数相互继承,将彼此的原型联系起来就形成了原型链。

    4.原型链中对象属性的查找规则

    在原型链中,我们想要查找某一个对象的属性,如果该属性在当前对象所在的函数中查找,如果没有的话就会沿着原型链向上查找,找到的话就返回属性值,如果都没有的话就会返回undefined。举个例子
    		//原型链中属性的查找
    		function Person(name,color){
    			this.name=name;
    			this.color=color;
    		}
    		function Teacher(name,age){
    			this.name=name;
    			this.age=age;
    		}
    		//实现继承
    		Teacher.prototype=new Person();
    		Teacher.prototype.book="书本";
    		var t1=new Teacher("aa",32);
    		//查找属性
    		//1.当Teacher中含有name属性,不管有没有赋值都表明在Teacher中含有name属性
    		console.log(t1.name);
                    //2.当查找Teacher中没有的属性的时候,但是Teacher的原型中有该属性
    		console.log(t1.book);
    		//3.当查找Teacher原型和本身都没有属性的时候,但是上级函数中有该属性的时候
    		console.log(t1.color);
    以上的三种情况就是一个很明显的利用原型链查找属性的例子,可以写个demo简单实验一下,只要测试过之后肯定能够很清晰的理解啦。

    5.在面向对象原型链中常见的函数

    1.hasOwnProperty():判断属性是否是自身私有属性,如果是的话返回true,否则的返回false
    2.in:判断属性是否可用,不管是自身私有还是原型中的属性,如果可用的话返回true,否则的返回false。
    感兴趣的同学可以深究一下这两个函数,这里就不用代码举例子了。

    6.总结

    该博客基本介绍了原型链的形成,以及在原型链中如何查找对象属性的问题,还有两个简单的函数。如果该文章能够对您产生帮助那是再好不过的。

    展开全文
  • 原型和原型链js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型链会是面试必不可少的话题。看完此篇文章一定会让你对原型,原型链有深刻全面的了解。深入...





    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型链会是面试中必不可少的话题。看完此篇文章一定会让你对原型,原型链有深刻全面的了解。

    深入系列:深入javascript之作用域

    深入系列:深入javascript之执行上下文


    一,函数对象

                    所有引用类型(函数,数组,对象)都拥有proto属性(隐式原型)

                    所有函数拥有prototype属性(显式原型)(仅限函数)

                    原型对象:拥有prototype属性的对象,在定义函数时就被创建

    二,构造函数

                    先复习下构造函数

    [javascript] view plain copy
    print?
    1. //创建构造函数  
    2.         function Word(words){  
    3.             this.words = words;  
    4.         }  
    5.         Word.prototype = {  
    6.             alert(){  
    7.                 alert(this.words);  
    8.             }  
    9.         }  
    10.         //创建实例  
    11.         var w = new Word(“hello world”);  
    12.         w.print = function(){  
    13.             console.log(this.words);  
    14.             console.log(this);  //Person对象  
    15.         }  
    16.         w.print();  //hello world  
    17.         w.alert();  //hello world  
    //创建构造函数 
    function Word(words){
    this.words = words;
    }
    Word.prototype = {
    alert(){
    alert(this.words);
    }
    }
    //创建实例
    var w = new Word("hello world");
    w.print = function(){
    console.log(this.words);
    console.log(this); //Person对象
    }
    w.print(); //hello world
    w.alert(); //hello world

                    print()方法是w实例本身具有的方法,所以w.print()打印hello world;alert()不属于w实例的方法,属于构造函数的方法,w.alert()也会打印hello world,因为实例继承构造函数的方法。

                    实例w的隐式原型指向它构造函数的显式原型,指向的意思是恒等于
    [javascript] view plain copy
    print?
    1.          w.proto === Word.prototype  
             w.proto === Word.prototype 

                    当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的proto属性中调用查找,也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性:

                    w本身没有alert()方法,所以会去Word()的显式原型中调用alert(),即实例继承构造函数的方法。        

    三,原型和原型链

    [javascript] view plain copy
    print?
    1.         Function.prototype.a = “a”;  
    2.         Object.prototype.b = ”b”;  
    3.         function Person(){}  
    4.         console.log(Person);    //function Person()  
    5.         let p = new Person();  
    6.         console.log(p);         //Person {} 对象  
    7.         console.log(p.a);       //undefined  
    8.         console.log(p.b);       //b  
            Function.prototype.a = "a"; 
    Object.prototype.b = "b";
    function Person(){}
    console.log(Person); //function Person()
    let p = new Person();
    console.log(p); //Person {} 对象
    console.log(p.a); //undefined
    console.log(p.b); //b

                    想一想p.a打印结果为undefined,p.b结果为b

                    解析:

                    p是Person()的实例,是一个Person对象,它拥有一个属性值proto,并且proto是一个对象,包含两个属性值constructor和proto

    [javascript] view plain copy
    print?
    1.         console.log(p.proto.constructor);   //function Person(){}  
    2.         console.log(p.proto.proto);     //对象{},拥有很多属性值  
            console.log(p.proto.constructor);   //function Person(){} 
    console.log(p.proto.proto); //对象{},拥有很多属性值

                    我们会发现p.proto.constructor返回的结果为构造函数本身,p.proto.proto有很多参数

           我们调用constructor属性,p._proto.proto.constructor得到拥有多个参数的Object()函数,Person.prototype的隐式原型的constructor指向Object(),即Person.prototype.proto.constructor == Object()

                 从p.proto.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p._proto.proto== Object.prototype

                    所以p.b打印结果为b,p没有b属性,会一直通过proto向上查找,最后当查找到Object.prototype时找到,最后打印出b,向上查找过程中,得到的是Object.prototype,而不是Function.prototype,找不到a属性,所以结果为undefined,这就是原型链,通过proto向上进行查找,最终到null结束

    [javascript] view plain copy
    print?
    1.         console.log(p.proto.proto.proto);   //null  
    2.         console.log(Object.prototype.proto);        //null  
            console.log(p.proto.proto.proto);   //null 
    console.log(Object.prototype.proto); //null
                    大家理解刚才的过程,相信下面这些应该也都明白
    [javascript] view plain copy
    print?
    1.         //Function  
    2.         function Function(){}  
    3.         console.log(Function);  //Function()  
    4.         console.log(Function.prototype.constructor);    //Function()  
    5.         console.log(Function.prototype.proto);      //Object.prototype  
    6.         console.log(Function.prototype.proto.proto);    //NULL  
    7.         console.log(Function.prototype.proto.constructor);  //Object()  
    8.         console.log(Function.prototype.proto === Object.prototype); //true  
            //Function 
    function Function(){}
    console.log(Function); //Function()
    console.log(Function.prototype.constructor); //Function()
    console.log(Function.prototype.proto); //Object.prototype
    console.log(Function.prototype.proto.proto); //NULL
    console.log(Function.prototype.proto.constructor); //Object()
    console.log(Function.prototype.proto === Object.prototype); //true

                    总结:

                    1.查找属性,如果本身没有,则会去proto中查找,也就是构造函数的显式原型中查找,如果构造函数中也没有该属性,因为构造函数也是对象,也有proto,那么会去它的显式原型中查找,一直到null,如果没有则返回undefined

                    2.p.proto.constructor  == function Person(){}

                    3.p._proto.proto== Object.prototype

                    4.p._proto.proto.proto== Object.prototype.proto == null         

                    5.通过proto形成原型链而非protrotype


                    最后附上一张图,大家阅读完之后,看图应该可以很容易理解




    展开全文
  • JavaScript原型和原型链

    2019-03-23 19:35:17
    JavaScript原型和原型链 JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法属性。原型对象也可能拥有原型,并从中继承...
  • js中的原型和原型链在网上似乎很难找到一个易懂的解释。
  • js 原型 原型链 原型 解释: 原型是首创的模型,代表同一类型的人物、物件、或观念(维基百科)。那边对应到javascript 来, 我们可以理解为:原型是对象创建之初的的模型,拥有同一类对象的公有属性行为(方法)...
  • 每个实例对象( object )都有一个私有属性(称之为 __proto__ )指向... 根据定义,null没有原型,并作为这个原型链中的最后一个环节。 任意一个对象的 原型 的 原型 的 原型 == null 试图访问一个对象的属性时,...
  • 之前对js中原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...
  • 详解javascript 原型和原型链
  • 原型链:肯定是抽象的,想要知道原型链,必须知道原型,构造函数,实例之间的关系! 我说下我理解的原型链:对象通过自身__proto__属性向上查找的过程! 我说完了,结合下面的笔记,小伙伴理解下......... 构造...
  • 在刚接触JavaScript的对象的时候,我的内心是懵逼的,什么原型、原型链,好像跟我之前学的其他语言的对象不太一样,今天我们就来好好捋一捋JavaScript中的原型与原型链。 在一般进行对象定义时,我们往往会首先定义...
  • 引用我很喜欢一篇文中的图片: 参考:原型和原型链
  • 主要介绍了javascript原型和原型链,学习javascript面向对象,感兴趣的小伙伴们可以参考一下
  • Javascript原型和原型链图解
  • 什么是原型? ...什么是原型链? 所有对象(Object除外)都有一个隐式原型属性:__proto__(前后都是两个下划线),属性值为它的构造函数的prototype的属性值。当查找某个对象的属性时,如果这...
  • js原型和原型链

    2020-12-29 16:32:07
    每个实例对象( object )都有一个私有属性(称之为 __proto__ )指向它的构造函数的原型对象(prototype )。该原型对象也有一个自己的原型对象( _...根据定义,null 没有原型,并作为这个原型链中的最后一个环节 ...
  • JavaScript的原型和原型链 原型和原型链JavaScript的非常重要的知识点,下面分享下我对它的理解。 class继承 在ES6,js引入了class关键字,用来声明一个类,我们可以使用constructor来构建对象,包括我们需要的...
  • 主要介绍了JavaScript使用原型和原型链实现对象继承的方法,简单讲述了javascript原型原型链的原理,并结合实例形式详细分析了javascript对象继承的常见实现技巧,需要的朋友可以参考下
  • js--原型和原型链

    2019-11-14 18:55:31
    js--原型和原型链
  • 本篇使用比较通俗的言语描述了什么是js原型和原型链,相信你看完这篇后一定懂了什么是js原型和原型链
  • 整理学习——JavaScript中的原型和原型链)原型构造函数原型和原型链 自己默默地理了一整天搞出来的东西,以下都是个人理解 原型 prototype属性,他包含了其所属对象以及其所属对象的构造函数的所有的属性方法。...
  • js的原型和原型链

    2020-10-18 09:48:17
    js原型 js原型链
  • 主要介绍了图解JS原型和原型链实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了JS原型和原型链原理与用法,结合实例形式详细分析了js原型和原型链概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
  • JavaScript之原型和原型链

    千次阅读 2020-07-12 23:49:31
    JavaScript之原型和原型链JavaScript的学习过程原型链肯定是一个很重要的知识点,下面我们就来深入的去看一下原型链 原型 首先看一个很简单的例子 function Person(name, age) { this.name = name; this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,009
精华内容 38,003
关键字:

js中的原型和原型链