javascript原型

在javaScript创建对象一文中提到过：用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同方法是不一样的，所以我们用原型把构造函数中公共的属性和方法提取出来进行封装，达到让所有实例共享的目的。

接下来进一步介绍javaScript原型。

一、javaScript原型机制

1、函数与原型的关系

js中创建一个函数，就会自动创建一个prototype属性，这个属性指向函数的原型对象，并且原型对象会自动获得一个constructor(构造函数)属性，指向该函数。

举例：以前面的原型模式创建对象为例说明

<script type="text/javascript">
function Person(){

}
Person.prototype.name="lxy";
Person.prototype.age=22;
Person.prototype.job="Software Engineer";
Person.prototype.sayName=function(){
    alert(this.name);
}

     var lxy=new Person();
     lxy.sayName();
     var personA=new Person();
     personA.sayName();
     alert(lxy.sayName()==personA.sayName());//true
</script>

Person对象和Person对象的原型之间的关系如下图1。简单一句话就是：Person.prototype.constructor指向Person。

图1函数、实例与原型的关系(图来着JS高程)

2、实例与原型的关系

通过构造函数创建一个实例，该实例内部将包含一个属性（指针），指向构造函数的原型对象。

举例：Person构造函数的实例Person1和Person2的[[Prototype]]属性都指向Person的原型。如图1所示。

Note:[[Prototype]]连接是存在于实例和构造函数的原型之间，而不是存在实例与构造函数之间。

关于这个指针，ECMA-262中叫[[Prototype]]，没有标准的方式访问[[Prototype]]，但Firefox、Safari和Chrome在每个对象上都支持一个属性__protp__，而在其他实现中，这个属性对脚本不可见。

3、原型链

实例有自己的属性和方法，而原型封装了所有实例共享的属性和方法，那这种共享是通过什么方式实现的呢？答案是原型链。

当要访问实例的属性时，解析器会执行一次搜索。首先从实例对象开始，如果在实例中找到了这个属性，则返回该属性的值；重点是如果没有找到的话，则继续搜索[[Prototype]]指针指向的原型对象，在原型对象中查找该属性，如果找到，则返回该属性的值。所以通过这种方式多个实例就能共享保存在原型中的属性和方法。这也是js的原型链。

Note:理解了原型链，很自然就能明白几个问题。

a、给实例添加一个与原型中同名的属性，就会将其屏蔽。因为搜索原型链时在实例中就能找到然后就返回了，根本到不了原型。

b、可以通过实例爬原型链访问原型中的值，但却不能通过实例重写原型中的值。同理。

c、原型的动态性，在原型上新增属性或方法能立即从实例反应出来。

二、原型相关的方法介绍

1、isPrototypeOf()方法

虽然实例的[[Prototype]]属性无法访问的，我们可以通过isPrototypeOf()方法来确认实例和原型之间的关系。这个方法呢是站在原型的角度来检测，原型是不是某个实例的原型。A.isPrototypeOf(B)，如果A的B的原型返回true，否则返回false。

举例：因为Person的两个实例lxy和personA内部都有一个[[Prototype]]属性指向Person.prototype。所以isPrototypeOf方法会返回true。

<script type="text/javascript">
    function Person(){

    }
    Person.prototype.name="lxy";
    Person.prototype.age=22;
    Person.prototype.job="Software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }

    var lxy=new Person();
    var personA=new Person();
    console.log(Person.prototype.isPrototypeOf(lxy)); //true
    console.log(Person.prototype.isPrototypeOf(personA)); //true
</script>

2、Object.getPrototypeOf()方法

这个方法是ECMAScript 5中新增的，返回实例的[[Prototype]]值。

这个方法是非常有用的，因为它是在Object上实现的。所以把任何实例扔给Object，它都能获得实例的原型。

举例

<script type="text/javascript">
    function Person(){

    }
    Person.prototype.name="lxy";
    Person.prototype.age=22;
    Person.prototype.job="Software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }

    var lxy=new Person();
    console.log(Object.getPrototypeOf(lxy));
    console.log(Object.getPrototypeOf(lxy)==Person.prototype); //true
    console.log(Object.getPrototypeOf(lxy).age);//22
</script>

结果：

3、hasOwnPrototype()方法

这个方法用于检测某个属性是否真正存在于实例中。是返回ture,否则返回false。

就像我们自己有一些资源和技能，但是也可以从爹妈那里得到一些资源和技能，比如看起来你有套别墅，但是你要知道哪些是你真正属于你自己的，哪些是爹妈给你的。

举例：比如我一出生父母就给我个名字lxy，这时候我用hasOwnPrototype()方法检测这个"name"属性是不真是我的，就会返回false。

后来我自己改了个名字starof，再用hasOwnPrototype()方法检测，这时就会返回true。

再后来我不想用这个名字了，我就把它delete掉了，用回了我父母给的名字。这时候再用hasOwnPrototype()方法检测这个"name"属性是不是我自己的，就会返回false。

这个一波三折的故事代码如下：

<script type="text/javascript">
    function Person(){

    }
    Person.prototype.name="lxy";

    var lxy=new Person();
    console.log(lxy.name);
    console.log(lxy.hasOwnProperty("name"));  //false
    lxy.name="starof";//通过重写屏蔽原型属性name,所以这个name就变成了实例属性
    console.log(lxy.name);
    console.log(lxy.hasOwnProperty("name"));  //true
    delete lxy.name;
    console.log(lxy.name);
    console.log(lxy.hasOwnProperty("name"));  //false
</script>

4、in操作符，for-in循环，Object的keys()和getOwnPrototypeNames()

in操作符在通过对象能够访问属性时返回true，无论该属性是实例属性还是原型属性。

for-in循环，返回所有能够通过对象访问的，可枚举的属性。即包括实例属性也包括原型属性。

屏蔽了原型中不可枚举的属性的实例属性也会在for-in循环中返回，因为根据规定，所有开发人员定义的属性都是可枚举的——只有在IE8及更早版本中例外。

Object.keys()方法，取得对象上所有可枚举的实例属性。该方法接收一个实例作为参数，返回一个包含所有可枚举属性的字符串数组。

Object.getOwnPrototypeNames()方法，获得所有实例属性，无论它是否可枚举。

<script type="text/javascript">
    function Person(){

    }
    Person.prototype.name="lxy";
    Person.prototype.age=22;
    Person.prototype.job="Software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }

    var lxy=new Person();
    //in
    console.log("name" in lxy);//in实例可访问的属性
    //for-in
    for(var prop in lxy){
        console.log(prop);
    }//for-in列出所有可访问的，可枚举的属性
    //Object.keys
    var keys=Object.keys(Person.prototype);
    console.log(keys);//Person的原型的所有可枚举属性
    var keys=Object.keys(lxy);
    console.log(keys);//lxy现在没有实例属性，所以keys为空
    lxy.name="lxy";
    var keys=Object.keys(lxy);
    console.log(keys);
    //Object.getOwnPrototypeNames
    console.log(Object.getOwnPropertyNames(lxy));//得到所有实例属性
</script>

三、原型语法

第一种：每添加一个属性和方法，都直接在原型上加。

<script type="text/javascript">
    function Person(){
    }
    Person.prototype.name="lxy";
    Person.prototype.age=22;
    Person.prototype.job="Software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }

    var lxy=new Person();
</script>

第二种:对象字面量的方法

<script>
    function Person(){
    }
    Person.prototype={
        name:"lxy",
        age: 22,
        job:"Software Engineer",
        sayName:function(){
            alert(this.name);
        }
    };
    var lxy=new Person();
</script>

第二种语法比较简单，少写几行代码，但是有一点要注意，字面量形式，完全重写了prototype属性，所以constructor不再指向Person，而是Object了。

<script>
    function Person(){
    }
    Person.prototype={
        name:"lxy",
        age: 22,
        job:"Software Engineer",
        sayName:function(){
            alert(this.name);
        }
    };
    var lxy=new Person();

    console.log(lxy.constructor==Person);//false
    console.log(lxy.constructor==Object);//true

</script>

如果constructor很重要，可手动设置为Person,如下。

<script>
    function Person(){
    }
    Person.prototype={
        constructor:Person,
        name:"lxy",
        age: 22,
        job:"Software Engineer",
        sayName:function(){
            alert(this.name);
        }
    };
    var lxy=new Person();

    console.log(lxy.constructor==Person);//true
    console.log(lxy.constructor==Object);//false
</script>

但是这样写会导致constructor的[[Enumerable]]特性被置为true。因为开发人员定义的属性都是可枚举的。

如果是兼容ECMAScript5的JS引擎可使用Object.definePrototype。

<script>
    function Person(){
    }
    Person.prototype={
        name:"lxy",
        age: 22,
        job:"Software Engineer",
        sayName:function(){
            alert(this.name);
        }
    };
    //重设构造函数，只适用于ECMAScript5兼容的浏览器
    Object.defineProperty(Person.prototype,"constructor",{
        enumerable:false,
    value:Person
    })

    var lxy=new Person();

    console.log(lxy.constructor==Person);//true
    console.log(lxy.constructor==Object);//false
</script>

时间： 2024-11-03 03:41:56

javascript原型的相关文章

javascript原型Prototype

在javaScript创建对象一文中提到过:用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同方法是不一样的,所以我们用原型把构造函数中公共的属性和方法提取出来进行封装,达到让所有实例共享的目的. 接下来进一步介绍javaScript原型. 一.javaScript原型机制 1.函数与原型的关系 js中创建一个函数,就会自动创建一个prototype属性,这个属性指向函数的原型对象,并且原型对象会自动获得一个constructor(构造函数)属性,指向该函数. 举例:以前面的原型模式创

javascript原型，组合，动态原型，稳妥构造函数式

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

JavaScript之基础-16 JavaScript 原型与继承

一.JavaScript 原型 原型的概念 - 在JavaScript中,函数本身也是一个包含了方法和属性的对象 - 每个函数中都有一个prototype属性,该属性引用的就是原型对象 - 原型对象是保存共享属性值和共享方法的对象 为对象扩展属性 - 扩展单个对象的成员 - 扩展共享的属性值 - 内存图描述 删除属性 - 可以使用delete关键字删除对象的属性 自由属性与原型属性 - 自有属性:通过对象的引用添加的属性;其它对象可能无此属性;即使有,也是彼此独立的属性 emp1.job = '

理解JavaScript原型

Javascript原型总会给人产生一些困惑,无论是经验丰富的专家,还是作者自己也时常表现出对这个概念某些有限的理解,我认为这样的困惑在我们一开始接触原型时就已经产生了,它们常常和new.constructor相关,特别是函数(function)的原型(prototype)属性(property).事实上,原型是一种非常简单的概念.为了更好的理解它,我们应该首先记住这个原则,那就是忘记我们已经学到的关于构造原型(construtor prototypes)的认识. 什么是原型? 原型是一个对象,

深入理解JavaScript原型链

前言 最近碰到一个题,大家可以试下. Object.prototype.a = function() { console.log("aaa "+this.name); }; Function.prototype.b = function() { console.log("bbb "+this.name); }; function Person(name) { this.name = name; } var person = new Person("Chin

深入理解javascript原型和闭包（15）——闭包

http://www.cnblogs.com/wangfupeng1988/p/3994065.html 深入理解javascript原型和闭包(15)——闭包

深入理解javascript原型和闭包（转）

深入理解javascript原型和闭包(完结) 说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分——原型和闭包,当然,肯定少不了原型链和作用域链.帮你揭开javascript最神秘的面纱. 为什么要偏偏要讲这两个知识点? 这是我在这么多年学习javascript的经历中,认为最难理解.最常犯错的地方,学习这两个知识点,会让你对javascript有更深层次的理解,至少理解了原型和作用域,就

介绍下Javascript原型和原型链的特点？

JavaScript原型: 每个对象都会在其内部初始化一个属性,就是prototype(原型). 原型链: 当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念. 特点: JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本.当我们修改原型时,与之相关的对象也会继承这一改变.

javascript原型链继承

一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constructor属性:每个原型对象都有一个constructor属性,这个constructor属性包含一个指向prototype属性所在函数的指针. 例如 Foo.prototype.constructor指向Foo函数.这个属性是只读的. __proto__属性(ES6通过对__proto__属性进行标