`
hjj20040849
  • 浏览: 113772 次
  • 来自: 广州
社区版块
存档分类
最新评论
阅读更多

本文是为了让一些初学者在不了解的情况下能够更好的运用和使用pototype,关于原型的东西后面会讲,所以如果有什么好建议可以在此留言提出,谢谢合作。

 

除了在类的构造器方法中定义属性和方法以外,我们还可以在构造器方法外使用prototype定义方法和属性。每个类都有prototype属性,该属性是一个静态属性,因此无需实例化,只需使用类引用该属性即可。

当然这里说的静态属性不是像java里面的static那样在第一次初始化后他就存在,然后每个实例调用的都是同一个那样子,换句话说,prototype的作用之一就是在构造器方法外定义方法和属性,从而使代码能够更好的复用。

下面举一个实例来说明prototy跟static是不一样的:

 

function Person(){
		this.age ;
		this.name ;	
	}
	
	function showInfo(){
		document.write("Hi,我叫 " + this.name + " ,我今年 " + this.age +" 岁啦<br>");		
	}
	
	Person.prototype.tellMeInfo = showInfo;
	var person = new Person();
	person.age = 12;
	person.name = "Cat";
	person.tellMeInfo();
	var person_2 = new Person();
	person_2.tellMeInfo();

 

 在浏览器中该程序显示结果为:

 

Hi,我叫 Cat ,我今年 12 岁啦
Hi,我叫 undefined ,我今年 undefined 岁啦
 

     每个构造器都有一个prototype属性,该属性在定义构造器方法时自动创建的,prototype属性代表用该函数创建的类的属性值,如果将方法分配给类的prototype属性,则该类的任何新创建的实例都可以使用这些方法。

       类的每个新实例也都有一个__proto__属性(注意前后分别是两个下划线),用于引用创建它的构造器的prototype属性。也就是说__proto__属性最终还是要经过对prototype属性的引用才能实现其功能,而且IE不支持使用__proto__属性,所以不建议使用该属性。

       下面是一个使用__proto__的例子():

 

function Person(myAge, myName){
	this.age = myAge;
	this.name = myName;	
}
	
function showInfo(){
	document.write("Hi,我叫 " + this.name + " ,我今年 " + this.age +" 岁啦<br>");		
}
	
var person = new Person(11, "Cat");
person.__proto__.tellMeInfo = showInfo;
person.tellMeInfo();
var person_2 = new Person(12, "Tom");
person_2.tellMeInfo();

 结果显示如下(注意IE浏览器不支持会报错):

 

Hi,我叫 Cat ,我今年 11 岁啦
Hi,我叫 Tom ,我今年 12 岁啦
 

 

1
8
分享到:
评论

相关推荐

    浅谈javascript中的prototype和__proto__的理解

    在工作中有时候会看到prototype和__proto__这两个属性,对这两个属性我一直比较蒙圈,但是我通过查阅相关资料,决定做一下总结加深自己的理解,写得不对的地方还请各位大神指出。 跟__proto__属性相关的两个方法 ...

    帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    这里说明一点,__proto__属性的两边是各由两个下划线构成(这里为了方便大家看清,在两下划线之间加入了一个空格:_ _proto_ _),实际上,该属性在ES标准定义中的名字应该是[[Prototype]],具体实现是由浏览器代理...

    js prototype和__proto__的关系是什么

    即:对象具有属性__proto__,每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的_...

    TsangTszKin#HexoBlog#prototype、__proto__与constructor1

    它的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(可以理解为父对象)里找,如果父对象也不存

    JS中的原型以及prototype、constructor、__proto__三者之间的关系

    1、任何一个函数内都有prototype属性,这个prototype属性指向另一个对象 ,这个对象就是就是原型对象 ,简称原型。注意这个prototype是函数本身所自带的属性 2、原型的作用就是实现方法共享,将多个对象会调用的相同...

    深入浅析JavaScript中prototype和proto的关系

    prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外,没有prototype属性)。 __proto__:每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的...

    简单解析JavaScript中的__proto__属性

    主要介绍了JavaScript中的__proto__属性,对于JavaScript中所谓的对象来讲,它指向对象的原型prototype,需要的朋友可以参考下

    傲娇大少之—【JS的原型,prototype、__proto__、constructor】

    关于prototype,怎么说呢,以前的前端开发是经常用的,但是最近忽然发现,好像很久都没用过这个属性了。因为现在封装好的主流框架和插件很多,用着方便,底层的东西都不怎么用了,也用不太到了。 最近自己在开发一款...

    【JavaScript源代码】怎样用JavaScript实现原型模式.docx

     概述 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性; prototype警告:学习了解原型模式前需先学习...

    Javascript中获取对象的原型对象的方法小结

    foo.__proto__ == F.prototype&#41;; 但是,__proto__属性在IE浏览器中一直到IE11才被支持。 那么在不支持__proto__属性的浏览器中,我们怎么得到对象的原型对象呢?可以通过constructor间接得到。 代码如下: &lt;

    javascript中的原型对象(prototype)和隐式原型(__proto__)

    作用:保存将来使用该构造函数构造出来的属性和方法,构造出来的属性和方法可以被共享。 注意:在prototype身上添加的属性或方法不是给当前函数用的,而是给将来new函数之后得到的实例对象使用的。 prototype属性专...

    JavaScript prototype属性深入介绍

    每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__。constructor属性的值为该函数的对象。在一个函数前面加上new来调用,则会创建一个隐藏连接到该...

    【JavaScript源代码】JavaScript中的几种继承方法示例.docx

    js中每个函数都有一个prototype属性,这个属性指向该函数作为构造函数调用时创建的实例的原型。原型对象上有一个constructor属性,指向创建该对象的构造函数,该属性不可枚举。 var obj = {}; obj.__proto__ === ...

    js构造函数constructor和原型prototype原理与用法实例分析

    __proto__, prototype和constructor 下面这三个属性的定义非常重要,始终贯穿在原型中。 prototype:此属性只有构造函数才有,它指向的是当前构造函数的原型对象。 __proto__:此属性是任何对象在创建时都会有的一...

    【JavaScript源代码】JavaScript中new操作符的原理示例详解.docx

     let obj = {} 2、空对象的内部属性 __proto__ 赋值为构造函数的 prototype 属性  该操作是为了将空对象链接到正确的原型上去  function Foo(num) { this.number = num } obj.__proto__ = Foo.prototype

    理解JavaScript的prototype属性

    Function的原型和它的prototype属性无关 对象的原型可以通过非标准的属性 __proto__ 或ECMAScript5的方法 Object.getPrototypeOf() 访问。 1其实是错的,Object这个原型链尽头的对象它没有原型。可是为了更简单表述...

    JS的原型介绍及原型的继承

    1. __ proto __  众所周知,JS中万物皆对象,所以每一个数据都会有一个__ proto __ 属性,这个属性叫... 函数是一个特殊的对象,除了和其他对象一样有 __ proto __ 属性之外,还有自己特有的属性(prototype),这个

    javaScript核心原理

    ECMAScript是一门高度抽象的面向对象(object-oriented)...不过一般来说,我们会使用__&lt;内部属性名&gt;__ 下划线来代替双括号,例如__proto__(这是某些脚本引擎比如SpiderMonkey的对于原型概念的具体实现,尽管并非标准)。

    JavaScript中的原型链prototype介绍

    JavaScript中的继承是通过原型链(prototype chain)来完成的:每个对象内部都有另外一个对象作为其prototype而存在,对象从这个prototype中继承属性(property)。对于每个对象来说,可以用以下三种方式来访问其原型...

Global site tag (gtag.js) - Google Analytics