精华内容
下载资源
问答
  • 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...
  • 原型对象和原型链

    2017-05-14 09:26:55
    之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...

    开篇

    之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你没有真正的理解。最近正在读《JavaScript高级程序设计》,书中对原型对象和原型链的描述让我受益匪浅,下面仅用一个对比性的例子来说明。

    我们经常会这么写

        function Person () {
            this.name = 'John';
        }
        var person = new Person();
        Person.prototype.say = function() {
            console.log('Hello,' + this.name);
        };
        person.say();//Hello,John
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    上述代码非常简单,Person原型对象定义了公共的say方法,虽然此举在构造实例之后出现,但因为原型方法在调用之前已经声明,因此之后的每个实例将都拥有该方法。从这个简单的例子里,我们可以得出:

    原型对象的用途是为每个实例对象存储共享的方法和属性,它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象,因此有别于实例方法或属性,原型对象仅有一份。

    所以就会有如下等式成立:

        person.say == new Person().say
    • 1
    • 1

    可能我们也会这么写

        function Person () {
            this.name = 'John';
        }
        var person = new Person();
        Person.prototype = {
            say: function() {
                console.log('Hello,' + this.name);
            }
        };
        person.say();//person.say is not a function
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    很不幸,person.say方法没有找到,所以报错了。其实这样写的初衷是好的:因为如果想在原型对象上添加更多的属性和方法,我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前,这样就会造成一个问题: 
    var person = new Person()时,Person.prototype为:Person {} (当然了,内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言,其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象,即{}。接下来重置了Person的原型对象,使其指向了另外一个对象,即

     Object {say: function}
    • 1
    • 1

    这时person.proto的指向还是没有变,它指向的{}对象里面是没有say方法的,因为此报错。

    从这个现象我们可以得出:

    在js中,对象在调用一个方法时会首先在自身里寻找是否有该方法,若没有,则去原型链上去寻找,依次层层递进,这里的原型链就是实例对象的proto属性

    若想让上述例子成功运行,最简单有效的方法就是交换构造对象和重置原型对象的顺序,即:

        function Person () {
            this.name = 'John';
        }
        Person.prototype = {
            say: function() {
                console.log('Hello,' + this.name);
            }
        };
        var person = new Person();
        person.say();//person.say is not a function
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    一张图让你秒懂原型链

    其实,只需要明白原型对象的结构即可:

        Function.prototype = {
            constructor : Function,
            __proto__ : parent prototype,
            some prototype properties: ...
        };
    • 1
    • 2
    • 3
    • 4
    • 5
    • 1
    • 2
    • 3
    • 4
    • 5

    总结:

    函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针proto,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用proto一直指向Object的原型对象上,而Object的原型对象用Object.proto = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。

    展开全文
  • 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...

    一个例子让你彻底明白原型对象和原型链

    1.

    之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》,书中对原型对象和原型链的描述让我受益匪浅,下面仅用一个对比性的例子来说明。

    我们经常会这么写

     function Person () {
     this.name = 'John';
     }
     var person = new Person();
     Person.prototype.say = function() {
     console.log('Hello,' + this.name);
     };
     person.say();//Hello,John
    

    上述代码非常简单,Person原型对象定义了公共的say方法,虽然此举在构造实例之后出现,但因为原型方法在调用之前已经声明,因此之后的每个实例将都拥有该方法。从这个简单的例子里,我们可以得出:

    原型对象的用途是为每个实例对象存储共享的方法和属性,它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象,因此有别于实例方法或属性,原型对象仅有一份。所有就会有如下等式成立:

    person.say == new Person().say

    可能我们也会这么写

     function Person () {
     this.name = 'John';
     }
     var person = new Person();
     Person.prototype = {
     say: function() {
      console.log('Hello,' + this.name);
     }
     };
     person.say();//person.say is not a function
    

    很不幸,person.say方法没有找到,所以报错了。其实这样写的初衷是好的:因为如果想在原型对象上添加更多的属性和方法,我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前,这样就会造成一个问题:

    当var person = new Person()时,Person.prototype为:Person {}(当然了,内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言,其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象,即{}。接下来重置了Person的原型对象,使其指向了另外一个对象,即

    Object {say: function},

    这时person.proto的指向还是没有变,它指向的{}对象里面是没有say方法的,因为报错。

    从这个现象我们可以得出:

    在js中,对象在调用一个方法时会首先在自身里寻找是否有该方法,若没有,则去原型链上去寻找,依次层层递进,这里的原型链就是实例对象的__proto__属性。

    若想让上述例子成功运行,最简单有效的方法就是交换构造对象和重置原型对象的顺序,即:

     function Person () {
     this.name = 'John';
     }
     Person.prototype = {
     say: function() {
      console.log('Hello,' + this.name);
     }
     };
     var person = new Person();
     person.say();//person.say is not a function
    

    一张图让你秒懂原型链

    在这里插入图片描述

    其实,只需要明白原型对象的结构即可:

     Function.prototype = {
     constructor : Function,
     __proto__ : parent prototype,
     some prototype properties: ...
     };
    

    2. 总结

    函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.proto = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。

    3. 出处

    作者:Deja0vu0
    https://www.jb51.net/article/105090.htm

    展开全文
  • 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...
    开篇

    之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》,书中对原型对象和原型链的描述让我受益匪浅,下面仅用一个对比性的例子来说明。


    我们经常会这么写

            function Person() {
                this.name = 'John';
            }
            var person = new Person();
            Person.prototype.say = function () {
                console.log('Hello,' + this.name);
            };
            person.say();//Hello,John
    上述代码非常简单,Person原型对象定义了公共的say方法,虽然此举在构造实例之后出现,但因为原型方法在调用之前已经声明,因此之后的每个实例将都拥有该方法。从这个简单的例子里,我们可以得出:

    原型对象的用途是为每个实例对象存储共享的方法和属性,它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象,因此有别于实例方法或属性,原型对象仅有一份。所有就会有如下等式成立:

    	person.say == new Person().say
    



    可能我们也会这么写
            function Person() {
                this.name = 'John';
            }
            var person = new Person();
            Person.prototype = {
                say: function () {
                    console.log('Hello,' + this.name);
                }
            };
    
            person.say();//person.say is not a function
    很不幸,person.say方法没有找到,所以报错了。其实这样写的初衷是好的:因为如果想在原型对象上添加更多的属性和方法,我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前,这样就会造成一个问题:

    当 var person = new Person() 时,Person.prototype为:Person {} (当然了,内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言,其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象,即{}。接下来重置了Person的原型对象,使其指向了另外一个对象,即

    Object {say: function}
    这时person.proto的指向还是没有变,它指向的{}对象里面是没有say方法的,因此报错。

    从这个现象我们可以得出:

    在js中,对象在调用一个方法时会首先在自身里寻找是否有该方法,若没有,则去原型链上去寻找,依次层层递进,这里的原型链就是实例对象的__proto__属性。

    若想让上述例子成功运行,最简单有效的方法就是交换构造对象和重置原型对象的顺序,即:

            function Person() {
                this.name = 'John';
            }
            Person.prototype = {
                say: function () {
                    console.log('Hello,' + this.name);
                }
            };
            var person = new Person();
            person.say();//person.say is not a function


    
    

    
    

    一张图让你秒懂原型链其实,只需要明白原型对象的结构即可:

            Function.prototype = {
                constructor : Function,
                __proto__ : parent prototype,
            some prototype properties: ...
            };


    总结:

    函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型

    对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.prototype.__proto__ = null表示原型链的最顶端,如此变形成了

    javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。

    
    
    
    
    展开全文
  • 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...

    开篇

    之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》,书中对原型对象和原型链的描述让我受益匪浅,下面仅用一个对比性的例子来说明。

    我们经常会这么写

     

    1     function Person () {
    2         this.name = 'John';
    3     }
    4     var person = new Person();
    5     Person.prototype.say = function() {
    6         console.log('Hello,' + this.name);
    7     };
    8     person.say();//Hello,John

     

    上述代码非常简单,Person原型对象定义了公共的say方法,虽然此举在构造实例之后出现,但因为原型方法在调用之前已经声明,因此之后的每个实例将都拥有该方法。从这个简单的例子里,我们可以得出:

    原型对象的用途是为每个实例对象存储共享的方法和属性,它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象,因此有别于实例方法或属性,原型对象仅有一份。

    所有就会有如下等式成立:

      person.say == new Person().say

    可能我们也会这么写

     

     1     function Person () {
     2         this.name = 'John';
     3     }
     4     var person = new Person();
     5     Person.prototype = {
     6         say: function() {
     7             console.log('Hello,' + this.name);
     8         }
     9     };
    10     person.say();//person.say is not a function

     

    很不幸,person.say方法没有找到,所以报错了。其实这样写的初衷是好的:因为如果想在原型对象上添加更多的属性和方法,我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前,这样就会造成一个问题: 当var person = new Person()时,Person.prototype为:Person {}(当然了,内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言,其内部有一个原型链指针__proto__,该指针指向了Person.prototype指向的对象,即{}。接下来重置了Person的原型对象,使其指向了另外一个对象,即 Object {say: function}, 这时person.__proto__的指向还是没有变,它指向的{}对象里面是没有say方法的,因为报错。 从这个现象我们可以得出:

    在js中,对象在调用一个方法时会首先在自身里寻找是否有该方法,若没有,则去原型链上去寻找,依次层层递进,这里的原型链就是实例对象的__proto__属性。

    若想让上述例子成功运行,最简单有效的方法就是交换构造对象和重置原型对象的顺序,即:

     

     1     function Person () {
     2         this.name = 'John';
     3     }
     4     Person.prototype = {
     5         say: function() {
     6             console.log('Hello,' + this.name);
     7         }
     8     };
     9     var person = new Person();
    10     person.say(); //Hello,John

     

    一张图让你秒懂原型链

    其实,只需要明白原型对象的结构即可:

     

    1     Function.prototype = {
    2         constructor : Function,
    3         __proto__ : parent prototype,
    4         some prototype properties: ...
    5     };

     

    总结:

    函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.proto = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。

     

    学习资源:https://kkkkkxiaofei.github.io/jekyll/update/2015/06/03/proto.html

     

    转载于:https://www.cnblogs.com/xiaochechang/p/5736090.html

    展开全文
  • 原型:函数中的属性prototype,她的名字就叫原型。可以通过也只能通过...先记住原型(prototype)和原型对象(proto) 下面用代码解释原型、原型对象、 原型链 <!DOCTYPE html> <html> <head&...
  • 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...
  • 主要为大家详细介绍了JS原型对象和原型链,感兴趣的小伙伴们可以参考一下
  • js原型对象和原型链

    2019-09-25 03:47:40
    原型对象  每个javascript对象都... 由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属...
  • 开篇之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明...
  • 每个实例对象身上都有一个__proto__属性,该属性指向的也是原型对象(隐式原型对象),并且实例的隐式原型对象和构造函数的显示原型对象是全等的。 原型链概念: 查找对象的属性的时候现在自身找,如果自身没有沿着...
  • 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用非常官方(事实上自己不懂)的解释去描写叙述。有一句话说的好:假设你不能把一个非常复杂的东西用最简单的话语描写叙述...
  • JS原型对象和原型链

    2017-07-08 16:25:47
    JS原型对象和原型链 在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象Object  函数对象Function。 一般而言,通过new Function产生的对象是函数对象,其他对象都是普通对象。...
  • 文章目录引子构造函数原型对象原型链继承 引子 有点意思的是,JavaScript的面向对象设计思想跟其他的面向对象语言(如Java、python)的设计思想有所不同。 JavaScript 虽是面向对象的语言,但JavaScript不使用类,不...
  • 开篇之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明...
  • 本篇文章带大家介绍一下JavaScript中的对象原型和原型链。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 对象原型 相信大家都这样用过 map: letarr=[0,1,2] letdoubleArr=arr.map(c=>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,837
精华内容 2,734
关键字:

原型链和原型对象