原型链

原型


原型是什么?我想每个人被问到的时候都会静下来思考,尽管已经过了这么多年了,也有很多专家学者说出了自己的理解,但是还是会觉得很难睡服他人。在我看来原型就是一个特殊的对象,其他对象可以通过它实现属性的继承,也就是说它就像Java中的抽象类一样。
简洁的原型语法:

Person.prototype = {
    name:"Jack",
    age:33,
    job:"Software Engineer",
    sayName:function(){
        console.log(this.name);
    }
}

原型链


为了便于理解,先上代码为敬。

function Person(){          //Person实例
    this.pName = "Jack";
    this.pAge = 22;
    this.pJob = "Software Engineer";
}

Person.prototype.sayPersonName = function(){        //Person原型方法
return "The person's name is " + this.pName;
};

function Man(){         //Man实例
    this.mName = "Greg";
    this.mAge = 33;
    this.mJob = "Doctor"
}

Man.prototype = new Person()        //将Person的实例赋给Man的原型

Man.prototype.sayManName = function(){      //创建Man原型方法
    return "The man's name is " + this.mName;
};

var people =  new Man();        //将Man的实例赋给people
console.log(people.sayPersonName());        //The person's name is Jack
console.log(people.sayManName ());      //The man's name is Greg

上面的即为一个简单的原型链,people是Man的实例,Man的原型是Person的实例,
而Person又有自己的原型。之所以people.sayPersonName()的结果是那样是因为在Person原型中可以找到这个函数,因而可以调用,另一个结果也是如此。他们都存在同一条链上,如果构造函数Person和Man中的属性名一致的话会导致Person对象中的属性和方法全部被覆盖,即使将属性放在原型中也是如此。那么展示的名字会变得一样。

属性查找


当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止,到查找到达原型链的顶部 - 也就是 Object.prototype - 但是仍然没有找到指定的属性,就会返回 undefined。

function Sum(){
    this.add = function(x,y){
        return x + y;
    }
}

Sum.prototype = {       //这种格式少用
    add:function(x,y){
        return x + y + 10;
    }
}

Object.prototype.subtract = function(x,y){
    return x - y;
}

var func = new Sum();
console.log(func.add(2,1));     //返回3,不是13
console.log(func.subtract(2,1));    //返回1

add方法并没有按照原型中的方法来取得值,属性在查找的时候是先查找自身的属性,如果没有再查找原型,再没有,再往上走,一直查到Object的原型上。还有一点subtract()方法不像Sum原型中的add方法的原因应该是Object存在原型,我们只能在它内部添加方法和属性,而无法去定义它。(在原型已经存在之后不要再使用字面量添加新属性和方法)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值