简单理解js的prototype属性

  在进入正文之前,我得先说说我认识js的prototype这个东西的曲折过程。

  百度js的prototype的文章,先看看,W3School关于prototype的介绍:

  

    你觉得这概念适合定义js的prototype这个东西吗?你是否也认为prototype是一个object对象的属性呢?是的话,请认真认真看我这篇文章,因为这篇文章会毁灭你的人生三观,呵呵,就是有这么严重,因为本人就是被这个定义给害惨的。

    不得不说,看了网上的一些介绍prototype的文章,基本上都说prototype是对象的一个属性,于是,我也坚定的认为prototype是一个对象的属性,所以,我被了坑好久好久,由此,引发的后果就是,我一次次的误解别人写的含有prototype的js代码,也就是当别人亮出js的prototype这个属性来写js代码时,我看着他们写的代码都是 ····一头雾水·····  ,悲催啊!所以,我恨死prototype这个东西了,因此,在这里,我今天必须把js的prototype属性道个明明白白。看官,请擦亮你的眼睛,仔细看我下面的实验。

    当然,我希望诸位看官也能够静下心来,把我下面的实验重新做一遍,好证明我的结论是正确的。

    同时,也为了证明·····我没有····骗你们·····,呵呵,废话不多说了,下面进入实验阶段。

    先介绍一个下面要用到的函数,JSON.stringify(value)。

    这个函数的作用是:把传入的参数value变成字符串,它有三个参数,第一个参数是必须的,其余的两个参数可填可不填。

    关于JSON.stringify函数的作用请看这篇文章。http://www.cnblogs.com/ningvsban/p/3660654.html,这里说的很清楚。

    首先,测试W3Schol的定义到底行不行的通:

    如果,真如W3Schol所说的那样,prototype是object的一个属性,那么,我们来创建一个对象,看看这个对象的prototype到底是啥。

var ob = { };//超级简单的空对象
alert(JSON.stringify(ob.prototype));

    你觉得上面的代码会alert出什么呢?既然prototype是object的一个属性,那么上面肯定能够获取到什么东西对吧?但是,如果你拿这段代码去做实验了,你会被打脸的,因为它alert的东西是·········undefined··········,也就是说object这个属性prototype不是个东西,很残酷吧,但现实就是这样,任何对象引用prototype都会出现undefined,不信,你可以试一试。

    我可以很明白的告诉你,prototype绝对不是给对象用的,对象根本没办法引用prototype这个属性,它真正的属主,其实是···········函数········,记住,能够引用prototype的东西绝对是函数,绝对是函数,绝对是函数,prototype是属于函数的一个属性,prototype是属于函数的一个属性,prototype是属于函数的一个属性,能够引用它的只有·····函数····,能够引用它的只有·····函数·····,能够引用它的只有····函数····,函数,函数,函数,重要的事情一定要说千百遍,呵呵,因为只有明确这一点,下面,你才明白我要讲的东西。别怪我这么墨迹啊!

    不信,你拿对象去引用它啊?看看它是否给报undefined的了,如果,每个对象引用prototype都报undefined的了,你还会认为对象能引用prototype的吗?你还会觉得的prototype是属于对象的属性吗?

    如果,即使对象引用prototype报undefined的也没办法让你信服prototype不是属于对象的,那么,我觉得你不用往下看了,因为对于prototype的本质的误解,你已经病入膏肓,无药可救了。我只能这么说。

    下面,我要给prototype一个名副其实的定义,请睁大你的眼睛看啊呵呵。

    prototype是函数的一个属性,是函数的原型对象。

    就是这么简单,能看明白吗? prototype只能够被   函数     调用。

    别搞混了js的object对象和function函数,js的对象和函数绝对是两个概念,为什么?因为js的function函数可以new出object对象啊,是吧?这个你总该知道吧?

    下面,来做试验证明我的结论。   

//首先定义一个有名函数func
function func(){

}
alert(func.prototype);

    你说,上面的代码会alert什么呢?还会不会是undefined的呢?我敢肯定的告诉你绝对不是undefined的,因为本人已经alert过了,呵呵。

    上面,弹出的窗口是:

    没错,返回的就是对象,这回你肯相信我,能够调用prototype的一定是函数了吧?object引用prototype的时候给你返回的是一个不是东西的东西undefined,函数引用prototype的时候给你返回一个真真实实存在的东西object的,这还不够证明prototype是给函数用的吗?还不能够证明对象是不能引用prototype的吗?呵呵,又多说了。

    上面我已经说过,prototype是函数的一个属性,也是函数的原型对象,而这里func函数引用prototype的时候返回的是一个对象object的,那么,结合这两个概念,你能得出什么结论呢?我想通过这不难得出结论:

    prototype是········函数的原型对象············,这能理解吗?不能理解,没有关系,我们再来做一个实验,终于要用到文章开始给你们介绍的一个函数JSON.stringify()了。

function func(){

}
alert(JSON.stringify(func.prototype));

    还是引用上面的函数func,只不过这里返回的是JSON.stringify()函数的返回值。

   你没有看错,这里alert的结果是一个空对象,这证明,prototype的的确确属于函数的属性,并且函数的prototype属性的js数据类型是对象,明白不?为什么现在是一个空对象?你有没有想过?为什么呢?请思考这个问题三秒钟,假如想不出来,那么没有关系,下面,我来解释。

  先看,实验代码:

function func(){

}
func.prototype.name =‘prototype是函数的的属性,本质是函数的原型对象‘;
alert(JSON.stringify(func.prototype))

    你说,上面的代码会alert出什么呢?请看下面:

    你没有看错,此刻,终于alert出东西来了,我在这里给prototype赋于一个属性name,所以,我这个时候在alert函数func的prototype时,你看到有值了吗?看到了prototype的属性name值了吗?现在再想想,为什么上面第一层alert函数func.prototype的时候,它是一个空对象呢?而现在它又是一个有值的对象呢?

    原因很简单呢,因为第一次的时候,我没有给函数的属性func.prototype赋予name属性,也没有给name属性赋值啊,而现在我已经给函数的属性func.prototype赋予属性name,并且赋值为········prototype是函数的的属性,本质是函数的原型对象······,所以,现在alert函数的属性func.prototype的时候它就有值啦,对吧?

    因此,这里得出结论:

    prototype是函数的的属性,本质是函数的原型对象。

    别以为js中只有对象才有属性,通过这里,我们也可以知道,其实js的函数也是有属性的,而且js的函数好像就只有这个属性prototype,而且js的这个函数属性同时还是函数的原型对象,你是不是被搞晕了?希望你没有被搞晕才好。

    为什么说prototype是函数的一个属性呢?因为,只有函数才能调用prototype,而且是以这样的方式func.prototype调用的,这样的方式调用东西是不是和对象调用属性一模一样呢?是的,就是因为函数调用prototype的时候是和对象调用属性的时候一样的,我们才把prototype说成是函数的一个属性,而函数的这个属性其实是一个对象(这个是不是对象,上面已经证明了,这里就不再说明),所以说,这个prototype就是函数的属性,本质是函数的原型对象。

    这里为什么强调说prototype的本质是函数的原型对象呢?

    下面看代码证明,我的代码很简单的:

    //定义一个函数
    function func(){

    }
    //给函数的属性prototype赋予一个方法get
    func.prototype.get=function(value){
        return value;//很简单,你给我什么我就输出什么
    }

    你说,怎么调用上面那个get方法?

    我给你一点提示,get是属于func函数的一个属性函数,既然是属性函数,那么我们怎么调用呢?

    很简单,属性函数必须由它的对象来调用,那么我们怎么获取get的对象呢?很简单,用关键字new来实例化func函数的对象就行了吗?是吧?

    下面,实例化func函数的一个对象ob1:

var ob1 = new func();
//用func实例化出来的对象来调用get属性函数
alert(ob1.get(‘hello,prototype原型对象‘));

    没错,用func函数实例化出来的对象ob1,确实能够调用get函数,上面已经利用ob1调用get函数alert出来了,这就证明func函数的实例对象是拥有get这个属性函数的,对吧?这么明显,就不用说明了吧。

    如果,你不信必须要用实例化func的对象来调用get函数,你可以试试直接用func调用get函数,也就是说,你可以尝试着func.get()调用一下get函数看看,看func它到底能不能够直接调用get函数。我想一定报错,呵呵,原因是什么,你自己想。

    那么,说了这么多,我还是没有说明,为什么我说prototype的本质是函数的原型对象啊?对吧?

    请看,下面的代码:

var ob2 = new func();
//用func实例化出来的对象来调用get属性方法
alert(ob2.get(‘我依然是func实例化出来的对象‘));

 

    看到没有,我还是再次利用func函数实例化一个ob2,这个对象依然能够调用get属性函数,这说明什么了呢?这说明了,利用func对象实例化的所有对象都可以调用get这个属性函数。既然如此,你说,prototype这个属性如果不是函数func的原型对象的话,那么为什么给prototype赋予的属性函数get能够被func所有实例化的对象所调用呢?假如prototype的本质不是func函数的原型对象,那么依据func函数实例化出来的对象就不可能一个个都能够调用get这个属性方法,对吧?为什么?我们来个比例,你说,一个不是源头的东西,它能影响到所有的东西吗?不能够吧?因此,这里得出结论:

    prototype是函数的一个属性,本质就是函数的原型对象。

    整篇文章就是为了说明这个结论。无他。希望看官能看懂这篇文章。对于prototype的应用下篇文章再讲,在此打住。

时间: 2024-08-05 19:36:50

简单理解js的prototype属性的相关文章

深入理解js的prototype以及prototype的一些应用

上一篇讲了js的prototype概念,在这里回顾一下prototype的定义: prototype是函数的一个属性,并且是函数的原型对象.引用它的必然是函数,这个应该记住. 但是,很奇怪,各位看官,你有没有看过类似下面这样引用prototype的js代码: function func(){ var args = Array.prototype.slice.call(arguments, 1); return args; } 咦???看着上面这行代码,你是不是对prototype只是属于函数产生

简单理解js的this

js的this是什么?关于这个东西,博客园里面有太多的解释了,不过,本人看了一下,感觉对this解释的有点复杂了,因此,本人在此给this一个简单易于理解的定义. this其实是js的一个对象,至于是什么对象呢?很简单,this这个对象就是:谁调用它它就指向谁. 关于这一点,其实,博客园的文章已经说明了很多了,有的文章也说到了点子上,只不过,他们解释的还是有点模糊,这里,我给大家做几个简单的对照实验,根据这几个对照实验的结果,大家应该很清楚了. 希望大家根据我的代码重复实现下面的实验. 首先,我

js函数prototype属性学习(一)

W3school上针对prototype属性是这么给出定义和用法的:使您有能力向对象添加属性和方法.再看w3school上给的那个实例,如下图: 仔细一看,原来最基本的作用就是对某些对象的属性.方法来扩展,我对这个实例又多写了几句代码进行测试,如下: var steve= new empolyee("Steve Jobs","enterpriser",1977); 这里我专门查看了steve这个实体所拥有的属性,发现多了一个salary属性,这个属性是新建实体时未曾

js中Prototype属性解释及常用方法

1.prototype的定义 javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. 每一个构造函数都有一个属性叫做原型.这个属性非常有用:为一个特定类声明通用的变量或者函数. 你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在.你可以看看下面的例子: function Test(){} alert(Test.prototype); // 输出 "Object" 1.

js函数prototype属性学习(二)

继续探讨js对象的prototype属性,前面已经看到在创建完一个对戏之后,随时都会有一个_proto_属性伴随所有,那么,这个_proto_又是用来干嘛的,面试时问的高大上的原型链又是怎么回事? 拿出前面已经有的例子,如下: function Person(name){ this.name = name; this.interduceSelf= function(){ alert("my name is " + this.name); }; }; Person.prototype.i

理解js的prototype原型对象

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象.使用原受对象的好处是可以让所有对象实例共享它所包含的属性和方法.换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下面的例子所示. function Person(){} Person.prototype.n

js的Prototype属性 解释及常用方法

JavaScript能够实现的面向对象的特征有: ·公有属性(public field) ·公有方法(public Method) ·私有属性(private field) ·私有方法(private field) ·方法重载(method overload) ·构造函数(constructor) ·事件(event) ·单一继承(single inherit) ·子类重写父类的属性或方法(override) ·静态属性或方法(static member) 例子一(JavaScript中允许添加

Js的prototype属性

prototype作用在JS中的对象上,可以为对象添加属性和方法. 语法:object.prototype.name=value 细节:当通过一个类创建对象以后,当通过对象访问属性的时候,JS查找属性的顺序是: 1.对象本身的属性,比如 obj={} obj.age=18 2.对象的类的prototype中查找,比如 obj={} obj.prototype.age=18 3.对象的根对象(object对象)中查找 4.当一个对象的类定义之后,可以通过prototype为对象的类添加新的属性和方

js原型prototype属性用法实例

//原型方法创建对象的属性和方法,达到共享的目的 function Box(){};//里面什么都没有,如果有就是实例属性和方法 Box.prototype.name='tianwei'; Box.prototype.age='100'; Box.prototype.run=function(){ return this.name+this.age; }; var box1=new Box(); document.write(box1.name); 实例属性不会共享,原型属性共享,优先访问实例属