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

本文是为了让一些初学者在不了解的情况下能够更好的运用和使用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
分享到:
评论

相关推荐

    js prototype和__proto__的关系是什么

    在JavaScript中,prototype和__proto__是理解对象原型继承机制的关键知识点。下面将详细介绍这两者之间的关系以及它们在JavaScript对象继承中所扮演的角色。 首先,prototype属性是函数所独有的。在JavaScript中,...

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

    总结来说,`prototype`用于定义实例的共享属性和方法,`__proto__`用于形成原型链实现属性查找,而`constructor`则用来标识对象的构造函数。理解这三个概念对于深入学习JavaScript的面向对象编程至关重要。在实际...

    浅谈javascript中的prototype和__proto__的理解

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

    prototype与__proto__区别详细介绍

    - 继承和属性查找主要是通过原型链完成的,`prototype`和`__proto__`在其中起到关键作用。 理解这两个概念对于深入掌握JavaScript的面向对象编程至关重要,它们是JavaScript实现继承和原型链的核心机制。通过正确...

    JS原型prototype和__proto__用法实例分析

    当我们创建`new Foo()`时,新实例`foo`的`__proto__`被设置为`Foo.prototype`,这使得`foo`能够访问`Foo.prototype`上定义的所有属性和方法。`Object.prototype`位于继承链的顶端,几乎所有的对象都能访问其属性,如...

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

    JavaScript中的`prototype`、`__proto__`和`constructor`是理解JavaScript面向对象编程的关键概念。这篇文章将通过图解的方式帮助读者深入理解这三个属性的关系。 首先,`__proto__`属性,它存在于每个对象中,表示...

    TsangTszKin#HexoBlog#prototype、__proto__与constructor1

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

    prototype_oop_javascript_ruby_prototype_

    标题 "prototype_oop_javascript_ruby_prototype_" 暗示了我们将探讨的是关于原型(Prototype)面向对象编程(Object-Oriented Programming, OOP)的概念,主要关注JavaScript和Ruby这两种语言之间的相似性和差异性...

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

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

    跟我学习javascript的prototype,getPrototypeOf和__proto__

    JavaScript中的prototype属性,getPrototypeOf方法和__proto__属性,是与原型链(prototype chain)相关的重要概念。它们在JavaScript对象继承机制中扮演着至关重要的角色。下面详细解释这些概念以及它们的使用方式...

    简单解析JavaScript中的__proto__属性

    总的来说,__proto__属性是JavaScript原型继承机制的关键部分,它揭示了对象之间通过原型链接的关系,以及通过这种关系实现属性和方法的查找和继承。理解__proto__有助于深入理解JavaScript的对象模型及其继承机制。

    javascript 中__proto__和prototype详解

    通过__proto__属性,我们可以追踪到对象的原型链,而通过prototype属性,函数可以将其属性和方法共享给通过它创建的所有实例。了解这两个属性的使用和它们之间的关系,有助于我们在使用JavaScript开发过程中更好地...

    【JavaScript源代码】五句话帮你轻松搞定js原型链.docx

    在JavaScript中,每个对象都有一个内部属性`[[proto]]`,这个属性通常通过`__proto__`访问,它指向创建该对象的函数的`prototype`属性。原型链的主要作用是使得一个对象能够通过其构造函数的原型链访问到其构造函数...

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

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

    js遍历属性 以及 js prototype 和继承

    在JavaScript中,遍历属性、理解`prototype`和掌握继承机制是编程中不可或缺的基本技能。本文将深入探讨这些概念,并通过实例来加深理解。 首先,让我们来看如何遍历JavaScript对象的属性。JavaScript提供了多种...

    JavaScript中__proto__与prototype的关系深入理解

    在JavaScript中,`__proto__` 和 `prototype` 是两个重要的概念,它们分别涉及对象的内部原型链和构造函数的原型。这篇文章将深入探讨这两者之间的关系。 首先,`__proto__` 属性是一个对象的内部属性,它指向该...

    了解JavaScript中的prototype (实例)

    2. **添加属性和方法**: 可以直接在构造函数的`prototype`上添加属性和方法,这样所有通过该构造函数创建的对象都能访问到这些属性和方法。 ```javascript Person.prototype.name = "John Doe"; Person.prototype....

Global site tag (gtag.js) - Google Analytics