理解js的prototype原型对象

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

    function Person(){}
    Person.prototype.name = 'mychirs';
    Person.prototype.age = 29;
    Person.prototype.job = 'Software Engineer';
    Person.prototype.sayName = function(){
      alert(this.name);
    };

    var person1 = new Person();
    person1.sayName();//'mychirs'

    var person2 = new Person();
    person2.sayName();//'mychirs'

    alert(person1.sayName == person2.sayName);//true

在此,我们将sayName()方法和所有属性直接添加到了Person的prototype属性中,构造函数变成了空函数。即使如此,也仍然可以通过调用构造函数来创建新对象,而且新对象还会具有相同的属性和方法。但与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。换句话说.personl和person2访问的都是同一组属性和同一个sayName()函数。要理解原型模式的T作原理,必须先理解ECMAScript巾原型对象的性质。

理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prot otype属性所在函数的指针。就拿前面的例子来说,Person.prototype. constructor措向Person。而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法。

创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Obj ect继承而来的。当调用构造函数创建一个新实例后,该实例的内部将包含—个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版中管这个指针叫[[Prototype】]。虽然在脚本中没有标准的方式访问【[ Prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性—proto_;而在其他实现中,这个属性对脚本则是完全不可见的。不过,要明确的真正重要的一点就是,这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。

以前面使用Person构造函数和Person.prototype创建实例的代码为例,图6-1展示了各个对象之间的关系。

上图展示rr Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。在此,Person *prototype指向了原型对象,而Person.prototype.constructor叉指回了Person。原型对象中除了包含cons t,ruct or属性之外,还包括后来添加的其他属性。Person的每个实例personl和person2都包含一个内部属性,该属性仅仅指向了Person.prot otype;换句话说,它们与构造函数没有直接的关系。此外,要格外注意的是,虽然这两个实例都不包含属性和方法,但我们却可以调用personl.sayName()。这是通过查找对象属性的过程来实现的。

虽然在所有实现中都无法访问到[[Prototype]:,但可以通过isProcotypeOf()方法来确定对象之间是否存在这种关系。从本质上讲,如果[[ Prototype]]指向调用isPrototypeOf()方法的对象[Person.prototype).那么这个方法就返回true,如下所示:

alert(Person.prototype.isPrototypeOf(personl));	//true
alert(Person.prototype.isPrototypeOf(person2));	//true

这里,我们用原型对象的isPrototypeOf()方法测试了personl和person2 0因为它们内部都有一个指向Person.prototype的指针,因此都返回了true。

ECMAScript 5增加了一个新方法,叫Object.getPrototypeOf(),在所有支持的实现中,这个方法返回[[PrototypeJ]]的值。例如:

alert(Object.get PrototypeOf(personl) == Person.prototype);	//true
alert(Object.get PrototypeOf(personl).name );	//'Nicholas'

这里的第一行代码只是确定Object.getPrototypeOf()返回的对象实际就是这个对象的原型。第二行代码取得了原型对象中name属性的值,也就是‘Nicholas‘。使用Object.getPrototypeOf()可以方便地取得一个对象的原型,而这在利用原型实现继承(本章稍后会讨论)的情况下是非常重要的。支持这个方法的浏览器有IE9+、Firefox 3.5+、Safari 5+、Opera 12+和Chrome。

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。也就是说,在我们调用personl. sayName《)的时候,会先后执行两次搜索。首先,解析器会同:“实例personl有sayName属性吗?”答:“没有。”然后,它继续搜索,再问:“personl的原捌有sayName属性吗?”答:“有。”于是,它就读取那个保存在原型对象中的函数。当我们调用person2.sayName()时,将会重现相同的搜索过程,得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理。

时间: 2024-10-18 08:43:53

理解js的prototype原型对象的相关文章

简单理解js的prototype属性

在进入正文之前,我得先说说我认识js的prototype这个东西的曲折过程. 百度js的prototype的文章,先看看,W3School关于prototype的介绍: 你觉得这概念适合定义js的prototype这个东西吗?你是否也认为prototype是一个object对象的属性呢?是的话,请认真认真看我这篇文章,因为这篇文章会毁灭你的人生三观,呵呵,就是有这么严重,因为本人就是被这个定义给害惨的. 不得不说,看了网上的一些介绍prototype的文章,基本上都说prototype是对象的一

链接:深入理解javascript构造函数和原型对象

链接:深入理解javascript构造函数和原型对象http://www.jb51.net/article/55539.htm

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

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

简单理解javascript中的原型对象,实现对之间共享属性和行为

javascript中提供了构造函数,能够方便的创建对象.典型的构造函数如下: function Person(name, age) { this.name = name; this.age = age; this.say = function () { return this.name + ',' + this.age;; } 之后就可以用new和构造函数创建多个对象.javascript中,类的不同对象之间,属性和方法都是独立的.什么意思呢?java中类的不同对象之间,成员变量是独立的(每个

深入理解JS继承和原型链

对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了class 关键字,但只是语法糖,JavaScript 仍旧是基于原型). 涉及到继承这一块,Javascript 只有一种结构,那就是:对象.在 javaScript 中,每个对象都有一个指向它的原型(prototype)对象的内部链接.这个原型对象又有自己的原型,直到某个对象的原型为null 为止

浅谈JS中的原型对象和原型链

我们知道原型是一个对象,其他对象可以用它实现属性继承,除了prototype,又有__proto__ 1. prototype和__proto__的区别 prototype是函数才有的属性                                     __proto__是每个对象都有的属性 但是__proto__不是一个规范的属性,只是部分浏览器 实现了此属性,对应标准的属性是[[Prototype]] 2. __proto__属性指向谁? __proto__的指向取决于对象创建时的实

一句话简单理解javascript中的原型对象

通过构造函数F创建的对象实例p 这个对象p的原型对象是 构造函数中prototype属性指向的对象s,这个对象p中也有个非标准的__proto__属性指向构造函数prototype所指向的对象s,所以就有 p.__proto__ === F.prototype;在对象P的原型对象s中有个属性constructor属性,指向的是构造函数本身.如果对象p的原型对象s被重写,那么P的构造函数不再是F,而是Object 例如: 1 function F(){}; 2 var p = new F(); 3

JS中的原型对象与构造器

在Javascript中:原型对象是属于构造函数的,不属于实例:实例只能共享原型对象中的属性和方法(当然也可以有自己的属性和方法,或者覆盖原型中同名的属性和方法):构造器constructor属于原型的,不属于实例:实例之所以能有constructor属性是因为它共享了原型对象的所有成员,包括原型对象的constructor属性: function Wede(){this.name="zhao"} //输出构造函数的原型对象console.log(Wede.prototype); //

JS构造函数、原型对象、隐含参数this

This 解析器再调用函数每次都会向函数内部传递一个隐含的参数this,this指向的是一个对象(函数执行的上下文对象) 1.以函数形式调用时,this永远是window. 2.以方法形式调用时,this就是调用方法的那个对象 3.当以构造函数的形式调用时,this就是新创建的那个对象 使用工厂的方法创建对象 通过该方法可以大批量的创建对象,这样创建的对象使用的构造函数都是Object,无法区分多种不同类型的对象. function create(name,age,geder){ var obj