javascript 之 prototype 浅析

prototype 原型

javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别,我列举重要的几点如下：

1. 函数是first class object, 也就是说函数与对象具有相同的语言地位

2. 没有类,只有对象

3. 函数也是一种对象,所谓的函数对象

4. 对象是按 引用 来传递的

那么这种 prototype based programming 的语言如何实现继承呢(OO的一大基本要素), 这也便是 prototype 的由来。

  脚本示例：

function foo(a, 　b, 　c) {
                return a * b * c;
            }
            console.log(foo.length);
            console.log(typeof foo.constructor);
            console.log(typeof foo.call);
            console.log(typeof foo.apply);
            console.log(typeof foo.prototype);

  运行结果：

   对于上面的代码,用浏览器运行后你会发现：
   1. length: 提供的是函数的参数个数
   2. prototype: 是一个object
   3. 其它三个都是function
   而对于任何一个函数的声明,它都将会具有上面所述的5个property(方法或者属性)。

   下面我们主要看下prototype：

function　 Person(name, 　gender) {
                this.name　 = 　name;
                this.gender　 = 　gender;
                this.whoAreYou　 = 　 function() { //这个也是所谓的closure,　内部函数可以访问外部函数的变量
                    var　 res　 = 　"I'm　"　 + 　this.name　 + 　"　and　I'm　a　"　 + 　this.gender　 + ".";
                    return　 res;
                };
            }
            //　那么在由Person创建的对象便具有了下面的几个属性
            Person.prototype.age　 = 　24;
            Person.prototype.getAge　 = 　 function() {
                return　 this.age;
            };
            flag　 = 　true;
            if　(flag) {
                var　 fun　 = new Person("Tower", "male");
                console.log(fun.name);
                console.log(fun.gender);
                console.log(fun.whoAreYou());
                console.log(fun.getAge());
            }
            Person.prototype.salary　 = 　10000;
            Person.prototype.getSalary　 = 　 function() {
                return　 this.name + "can　earn about　" + this.salary　 + "RMB　each　month.";
            };
            //　下面就是最神奇的地方,　我们改变了Person的prototype,而这个改变是在创建fun之后
            //　而这个改变使得fun也具有了相同的属性和方法
            //　继承的意味即此
            if　(flag) {
                console.log(fun.getSalary());
                console.log(fun.constructor.prototype.age);　 //而这个相当于你直接调用　Person.prototype.age
                console.log(Person.prototype.age);
            }

  运行结果：

从上面的示例中我们可以发现：

对于prototype的方法或者属性,我们可以动态地 增加, 而由其创建的对象自动会 继承 相关的方法和属性。
另外,每个对象都有一个constructor属性,用于指向创建其的函数对象,如上例中的 fun.constructor 指向的 就是 Person。

 

那么一个疑问就自然产生了, 函数对象中自身声明的方法和属性与prototype声明的对象有什么差别?
 1. 自身声明的方法和属性是 静态的, 也就是说你在声明后,试图再去增加新的方法或者修改已有的方法,并不会 对由其创建的对象产生影响, 也即继承失败。
 2. 而prototype可以动态地增加新的方法或者修改已有的方法, 从而是 动态的 ,一旦 父函数对象 声明了相关 的prototype属性,由其创建的对象会 自动继承 这些prototype的属性。

 

     继续上面的例子:

    flag　 = 　true;
            //　函数内部声明的方法是静态的,无法传递的
            Person.school　 = 　"ISCAS";
            Person.whoAreYou　 = 　 function() {
                return　 "zhutao";
            };　 //动态更改声明期的方法,并不会影响由其创建的对象的方法,　即所谓的静态
            if　(flag) {
                console.log(Person.school);
                console.log(fun.school);　 //输出的是　"undefined"
                console.log(Person.whoAreYou());　 //输出　zhutao
                console.log(fun.whoAreYou());　 //　I'm　Tower　and　I'm　a　male.
            }
            Person.prototype.getSalary　 = 　 function() {
                return　 "I　can　earn　1000000　USD";
            };
            if　(flag) {
                console.log(fun.getSalary());　 //已经继承了改变,　即所谓的　动态
            }

运行结果：

既然有函数对象本身的属性, 也有prototype的属性, 那么是由其创建的对象是如何搜索相应的属性的呢？

 

   基本是按照下面的流程和顺序来进行：

      1. 先去搜索函数对象本身的属性,如果找到立即执行。
      2. 如果1没有找到,则会去搜索prototype属性,有2种结果,找到则直接执行,否则继续搜索父对象的父对象的prototype, 直至找到,或者到达 prototype chain 的结尾(结尾会是Object对象)。

 以上也说明，如果函数对象本身的属性与prototype属性相同(重名)时的解决方式, 函数本身的对象优先。

   再看一个多重prototype链的例子：

function　 Employee(name) {
                this.name　 = 　"";
                this.dept　 = 　"general";
                this.gender　 = 　"unknown";
            }

            function　 WorkerBee() {
                this.projects　 = 　 [];
                this.hasCar　 = 　false;
            }
            WorkerBee.prototype　 = 　new　 Employee;　 //　第一层prototype链
            function　 Engineer() {
                this.dept　 = 　"engineer";　 //覆盖了　"父对象"
                this.language　 = 　"javascript";
            }
            Engineer.prototype　 = 　new　 WorkerBee;　 //　第二层prototype链
            var　 jay　 = 　new　 Engineer("Jay");
            if　(flag) {
                console.log(jay.dept);　 //engineer,　找到的是自己的属性
                console.log(jay.hasCar);　 //　false,　搜索到的是自己上一层的属性
                console.log(jay.gender);　 //　unknown,　搜索到的是自己上二层的属性
            }

运行结果：

 

总结：

1、javascript的prototype给语言本身增加了很强的灵活性,但与class based programming相比整个思维逻辑还是有很大的不同,所以需要更多地思考和揣摩。

2、而javascript是披着c语言外衣的函数式语言，理解自然也需要更多地思考。

 

转载于:https://www.cnblogs.com/yuan-jun/p/6200698.html