js原型链理解

  • 内容
  • 评论
  • 相关

js&jq

首先我们先来了解一下js原型链的一些概念:

构造函数:
在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,
也包括用户自己定义的函数。一旦函数被作为构造函数执行,它内部的this属性将引用函数本身。

通常来说,构造函数没有返回值,它们只是初始化由this指针传递进来的对象,并且什么也不返回。
如果一个函数有返回值,被返回的对象就成了new表达式的值。从形式上看,
一个函数被作为构造函数还是普通函数执行的唯一区别,是否用new运算符。

原型对象:
每个javascript对象都有一个原型对象,这个对象在不同的解释器下的实现不同。比如在firefox下,每个对象都有一个隐藏的__proto__属性,这个属性就是“原型对象”的引用。

原型链:由于原型对象本身也是对象,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefined.原型链一般实现为一个链表,这样就可以按照一定的顺序来查找。

那么__proto__是什么?每个对象都会在其内部初始化一个属性,就是__proto__,
当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,
那么他就会去__proto__里找这个属性,
这个__proto__又会有自己的__proto__,于是就这样一直找下去,
这也就是我们平时所说的原型链的概念。

__proto__与prototype的关系
var obj=new constructor;
obj.__proto__==constructor.prototype

先上个代码看看:

<script type="text/javascript">

function person(name,job,salary){
       this.name=name;
       this.salary=salary;
       this.getJob=function(){
          return this.job=job;
       }
    }
    person.prototype.age=24;
    person.prototype.getSalary=function(){
       alert('1w');
    }
    var company=function(){}
    company.prototype=new person('ken','programer','1w');
    var obj=company.prototype;
    var test=new company;
    //原型链的关系
    //obj.__proto__==person.prototype
    //test.__proto__==company.prototype
    //company.prototype.__proto__.getSalary()==person.prototype.getSalary()
    //test.getSalary()==company.prototype.__proto__.getSalary()
    //test.__proto__.__proto__.getSalary()==company.prototype.__proto__.getSalary()
    alert(test.__proto__.__proto__.getSalary()==test.getSalary());

</script>

下面这个也是原型链的例子

<script type="text/javascript">

var Calculator = function(x, y) {
    this.x = x*y;
    this.y = y+y;
    this.a=function(x,y){
        return x*y;
    }(x,y);
};
Calculator.prototype = function() {
    add= function (x,y) {
        return x + y;
    },
    subtract=function (x,y) {
        return x - y;
    }
    return {
        A:add,
        S:subtract
    }
}();
var test=new Calculator(3,2);
alert(test.A);

</script>

评论

1条评论