Javascript中的原型prototype

prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。

简而言之,prototype就是“一个给类的对象添加方法的方法”,使用prototype属性,可以给类动态地添加属性和方法,以便在JavaScript中实现“继承”的效果。

通过以此函数作为构造函数构造出来的对象都自动的拥有构造函数的prototype对象的成员属性和方法。

其中的要点是:

  1. prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
  2. prototype的值是一个对象
  3. 可以任意修改函数的prototype属性的值。
  4. 一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。

创建对象:

对于Object对象,可以使用对象字面量(Object literal)来创建,例如:

var foo = {
    x: 10,
    y: 20
};

javascript中的每个对象都隐式含有一个[[prototype]]属性,这是ECMAScript中的记法,目前各大浏览器厂商在实现自己的javascript解释器时,采用的记法是__proto__,也就是说每个对象都隐式包含一个__proto__属性。

当有多个对象时,通过__proto__属性就能够形成一条原型链。看下面的例子:

var a = {
    x: 10,
    calculate: function (z) {
        return this.x + this.y + z;
    }
};
var b = {
    y: 20,
    __proto__: a
};
var c = {
    y: 30,
    __proto__: a
};
// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80

上面的代码在声明对象b、c时,指明了它们的原型为对象a(a的原型默认指向Object.prototye,Object.prototype这个对象的原型指向null),这几个对象在内存中的结构大致是这样的:

除了我们这里说的__proto__属性,相信大家平常更常见的是prototype属性。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
    /*
    javascript的每个对象都有__proto__属性,但是只有函数对象有prototype属性。
        使用对象字面量方式创建的对象的__proto__属性指向Object.prototype(Object.prototype的__proto__属性指向null);
        使用函数字面量创建的对象的__proto__属性指向Function.prototype(Function.prototype对象的__proto__属性指向Object.prototype)。
    */

    //b和c的隐式原型(__proto__)指向了a的隐式原型(__proto__).a.__proto__ ==>object.prototype

    /*
    b.__proto__ ==> a.__proto__()
    c.__proto__ ==> a.__proto__()
    a.__proto__ ==>object.prototype
    >object.prototype.__proto__ ==> null
    */

    var a={
        x:10,
        calculate:function(z){
            return this.x+this.y+z;
        }
    }
    var b={
        y:20,
        __proto__:a
    }
    var c={
        y:30,
        __proto__:a
    }

    console.log(b.calculate(30))
    console.log(c.calculate(40))

    console.log(b.__proto__== a)//true
    console.log(c.__proto__== a)//true
    console.log(b.__proto__== c.__proto__)//true

    /*
    1 __proto__表示该函数对象的原型
    2 prototype表示使用new来执行该函数时(这种函数一般成为构造函数),新创建的对象的原型。
    */

    Array.prototype.sum=function(){
        var result=0;
        for(var i=1;i<=this.length;i++){
            result+=i;
        }
        return result;
    }
    Array.prototype.clear=function(){

    }
    var arr=[1,2,3,4,5];
    console.log(arr.sum())
    console.log(arr.__proto__==Array.prototype) //true

    var arr2=new Array(2,4,6);
    console.log(arr2.__proto__==Array)//false
    console.log(arr2.__proto__==Array.prototype)//true

</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
    function Foo(y) {
        this.y = y;
    }

    Foo.prototype.x = 10;

    Foo.prototype.calculate = function (z) {
        return this.x + this.y + z;
    };

    var b = new Foo(20);
    var c = new Foo(30);

    b.calculate(30); // 60
    c.calculate(40); // 80

    console.log(
            b.__proto__ === Foo, // false
            b.__proto__ === Foo.prototype, // true
            c.__proto__ === Foo.prototype, // true

            b.constructor === Foo, // true
            c.constructor === Foo, // true
            Foo.prototype.constructor === Foo, // true

    b.calculate === b.__proto__.calculate, // true
    b.__proto__.calculate === Foo.prototype.calculate // true

    );

</script>
</head>
<body>
</body>
</html>

javascript的每个对象都有__proto__属性,但是只有函数对象prototype属性。

那么在函数对象中, 这两个属性的有什么区别呢?

  1. __proto__表示该函数对象的原型
  2. prototype表示使用new来执行该函数时(这种函数一般成为构造函数),新创建的对象的原型。
时间: 2024-10-06 20:39:28

Javascript中的原型prototype的相关文章

图解JavaScript中的原型链

转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof obj和obj instanceof Type来识别类型,那么两者的区别在哪?先来看两段代码 <!--typeof obj的方式判断--> <script>    var str = "toby";    console.log(typeof str);// stri

javaScript中__proto__与prototype的区别与联系

[转]javaScript中__proto__与prototype的区别与联系 2014-5-4阅读490 评论0 最近在学习javascript的原型,发现了__proto__与prototype,学问很大,于是研究了一下. 首先解释一下什么是原型? 原型是一个对象,其他对象可以通过它实现属性继承. 对象又是什么呢? 在javascript中,一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined,null,boolean,number,array,string),那它

JavaScript中的原型和继承

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

【转】JavaScript中的原型和继承

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由“奥迪”或“标致”这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术.轮胎的化合物成分和安全特性上

javascript中的原型和闭包

定义 //闭包测试 function bbTest() { var local = "这里是本地变量"; //闭包会扩大局部变量的作用域,具备变量一致会存活到函数之外,在函数之外可以访问 this.show = function () { return local; } } //非闭包测试 function fbbTest() { var local = "这里是本地变量"; } fbbTest.prototype.show = function () { retu

浅谈JavaScript中的原型模式

在JavaScript中创建对象由很多种方式,如工厂模式.构造函数模式.原型模式等: <pre name="code" class="html">//工厂模式 function createPerson(name,age,job) { var o = new Object; o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); } retur

JavaScript中的Array.prototype.slice.call()方法学习

JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意: 这个对象一定要有length属性). 但有一个例外,IE下的节点集合它不能转换(因为IE下的dom对象是以com对象的形式实现,js对象和com对象不能进行转换) 首先,我们来看看JavaScript中的slice用法, 在JavaScript中Array是一个类,slice是此类中的一个方法,slice的中文意思是 '截取' 一个是String.

理解javascript中的原型模式

一.为什么要用原型模式. 早期采用工厂模式或构造函数模式的缺点:  1.工厂模式:函数creatPerson根据接受的参数来构建一个包含所有必要信息的person对象,这个函数可以被无数次的调用,工厂模式尽管解决了创建多个相似对象的问题,却没有解决对象识别的问题(返回的是自定义的一个对象o,不明确对象o的类型).  2. 构造函数模式:构造函数的调用和其他oo语言一样,用new操作符来构建一个Person的实例:javascript中的构造函数也是函数(所以也可以直接像普通函数那样直接调用方法名

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

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