JavaScript中原型和原型链详解(3)


<script type="text/javascript">
    function Animal(name)   //积累构造函数
    {
        this.name = name;//设置对象属性
    }

Animal.prototype.behavior = function() //给基类构造函数的prototype添加behavior方法
    { 
        alert("this is a "+this.name);
    }

var Dog = new Animal("dog");//创建Dog对象
    var Cat = new Animal("cat");//创建Cat对象

Dog.behavior();//通过Dog对象直接调用behavior方法
    Cat.behavior();//output "this is a cat"

alert(Dog.behavior==Cat.behavior);//output true;
</script>

可以从程序运行结果看出,构造函数的prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的。(可以试一下将Animal.prototype.behavior 中的prototype属性去掉,看看还能不能运行。)在这里,prototype属性指向Animal对象。

数组对象实例

再看个数组对象的实例。当我们创建出array1这个对象的时候,array1实际在Javascript引擎中的对象模型如下:

复制代码 代码如下:


var array1 = [1,2,3];

JavaScript中原型和原型链详解

array1对象具有一个length属性值为3,但是我们可以通过如下的方法来为array1增加元素:

复制代码 代码如下:


array1.push(4);


push这个方法来自于array1的__proto__成员指向对象的一个方法(Array.prototye.push())。正是因为所有的数组对象(通过[]来创建的)都包含有一个指向同一个具有push,reverse等方法对象(Array.prototype)的__proto__成员,才使得这些数组对象可以使用push,reverse等方法。

函数对象实例

复制代码 代码如下:


function Base() { 
    this.id = "base"
}  

JavaScript中原型和原型链详解

复制代码 代码如下:


var obj = new Base();


这样代码的结果是什么,我们在Javascript引擎中看到的对象模型是:

JavaScript中原型和原型链详解

new操作符具体干了什么呢?其实很简单,就干了三件事情。

复制代码 代码如下:


var obj  = {}; 
obj.__proto__ = Base.prototype; 
Base.call(obj);

原型链

原型链:当从一个对象那里调取属性或方法时,如果该对象自身不存在这样的属性或方法,就会去自己关联的prototype对象那里寻找,如果prototype没有,就会去prototype关联的前辈prototype那里寻找,如果再没有则继续查找Prototype.Prototype引用的对象,依次类推,直到Prototype.….Prototype为undefined(Object的Prototype就是undefined)从而形成了所谓的“原型链”。

复制代码 代码如下:


<script type="text/javascript">
    function Shape(){
        this.name = "shape";
        this.toString = function(){
            return this.name;
        }
    }
    function TwoShape(){
        this.name = "2 shape";
    }
    function Triangle(side,height){
        this.name = "Triangle";
        this.side = side;
        this.height = height;
        this.getArea = function(){
            return this.side*this.height/2;
        }
    }

TwoShape.prototype = new Shape();
    Triangle.prototype = new TwoShape();
</script>

这里,用构造器Shape()新建了一个实体,然后用它去覆盖该对象的原型。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgffpp.html