正文

JavaScript面向对象编程指南(五) 原型

IP云
IP云V管理员/0 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

第5章 原型

5.1 原型属性 

        function f(a,b){

            return a*b;

        };

        // length  属性

        f.length;  //

        // constructor 构造属性

        f.constructor; // function Function() { [native code] }

        // prototype 属性 初始值是空对象

        typeof f.prototype; //"object"

5.1.1 利用原型添加方法和属性 

        function f1(name,color){

          // 使用this添加属性

           this.name=name;

           this.color=color;

           this.whatAreYou=function(){

            return 'I am a'+this.color+''+this.name;

           };

        }

        // 使用prototype属性添加属性和方法

        f1.prototype.price=100;

        f1.prototype.rating=3;

        f1.prototype.getInfo=function (){

          return 'Rating: '+this.rating+',price: '+this.price;

        };

5.1.2 使用原型的属性和方法 

        function f1(name,color){

          // 使用this添加属性

           this.name=name;

           this.color=color;

           this.whatAreYou=function(){

            return 'I am a'+this.color+''+this.name;

           };

        }

        // 使用prototype属性添加属性和方法

        f1.prototype.price=100;

        f1.prototype.rating=3;

        f1.prototype.getInfo=function (){

          return 'Rating: '+this.rating+',price: '+this.price;

        };

       var f2=new f1('webcam','black');

       f2.color; // "black"

       f2.getInfo(); //"Rating: 3,price: 100"

       // 修改prototype属性，由同一构造器创建的所有对象的prototype属性也都会同时发生改变（会影响在修改之前已经创建的对象）

       f1.prototype.get=function(what){

        return this[what];

       }

       f2.get('price');  //

5.1.4 利用自身属性重写原型属性

对象自身属性的优先级高于原型属性 

       function F1(name){

        this.name=name;

       };

       F1.prototype.name='Alen';

       var f2=new F1('XiaoMing');

       f2.name;  // "XiaoMing"  不是 Alen

       // 使用hasOwnProperty()判断一个属性是自身属性还是原型属性

       f2.hasOwnProperty('name');  //true

       //删除自身属性后，原型属性才会显示

       delete f2.name; // true

        f2.name; // "Alen"

5.1.5 isPrototypeOf()方法

isPrototypeOf()：当前对象是否为另一个对象的原型 

        var person={

            like:'eat',

            age:12,

            sex:'boy'

        };

        function F1(name){

             this.name=name;

        }

        F1.prototype=person;

        var f2=new F1('Alen');

        // 判断person是否为f2的原型

       person.isPrototypeOf(f2);  //true

       //使用getPrototypeOf()获取原型

       Object.getPrototypeOf(f2)===person; //true

5.1.6 神秘的__proto__链接

5.2 扩展内建对象

内建对象的构造器函数可以通过其原型来进行扩展。 

     <script type="text/javascript">

       // 示例1：扩展Array的内建函数，用来查询数组中是否存在某个特定的值

       Array.prototype.inArray=function(needle){

         for (var i = 0; i < this.length; i++) {

             if(this[i]===needle){

                return true;

             }else{

                 return false;

             }

         };

       };

       var colors=['red','black','blue'];

       colors.inArray('red');  //true

       colors.inArray('green'); //false

     //示例2：反转字符串

     // 先利用split()将目标字符串转换成数组，然后调用该数组的reverse()方法产生一个反向数组。
       // 最后通过join()方法将结果数组转换为字符串

     String.prototype.reverse=function (){

         return Array.prototype.reverse.apply(this.split('')).join('');

     };

     "bums".reverse(); //smub

     </script>

5.2.1 关于内建对象的讨论

如果想通过原型为某个对象添加一个新属性，务必检查一下该属性是否已经存在。

5.2.2 原型陷阱

注意： 1> 当对原型对象执行完全替换时，可能会触发原型链中某种异常

2> prototype.constructor 属性不可靠 

 <script type="text/javascript">

         function Dog(){

             this.tail=true;

         };

         var f1=new Dog();

         var f2=new Dog();

         // 仍可以为Dog()的原型添加属性，添加之前已经存在的对象也可访问新属性

         Dog.prototype.say=function(){

             return 'worf';

         };

         // f1、f2可以访问新方法

         f1.say();  //"worf"

         f2.say(); //"worf"

         // 检查对象的构造器

         f1.constructor === Dog; // true  正常

         f2.constructor === Dog;// true  正常

         Dog.prototype.constructor === Dog; // true

         // 用自定义新对象完全覆盖掉原有的原型对象

         Dog.prototype={

             paws:4,

             hair:true

         };

         // 这样原有对象不能访问新属性,但通过__proto__与原有的原型保持联系

         f1.paws; //undefined

         f1.say();  //"worf"

         typeof f1.__proto__.say; // "function"

        // 之后创建的对象室友被更新后的prototype对象

        var f3=new Dog();

        f3.say(); // f3.say is not a function

        f3.tail; // true

        f3.paws; //

        // __proto__指向新的原型对象

        f3.__proto__.hair; //true

        // 新对象的constructor属性不在保持正确

        f3.constructor;// function Object() { [native code] }

                       // 本应该指向Dog(),现在指向Object

        f1.constructor; //function Dog(){this.tail=true;}  仍为Dog() 不变

        Dog.prototype.constructor; // function Object() { [native code] }

        //重新设置constructor属性 解决

        Dog.prototype.constructor=Dog;

        new Dog().constructor === Dog; // true

     </script>

相关阅读

目录[+]