zoukankan      html  css  js  c++  java
  • prototype为对象添加属性和方法

    可以通过prototype来为已经定义好的的"类"添加属性和方法。这里来了解一下prototype的基础知识。prototype是"构造函数"的属性,不是实例的属性.

    示例:

    function HiClass() {  
        this.sayHi = function(){  
            alert("hi");  
        }  
    }  
      
    var obj = new HiClass();   
    alert(HiClass.prototype);//outputs [object, object]  
    alert(obj.prototype);//outputs undefined  

    在用prototype的方式实现继承一个类的时候,要注意其可能覆盖别的prototype方式添加的属性和方法。如果HiClass.prototype.prop = 'value'是在HiClass.prototype = new HelloClass()之前则不会有prop属性,如果在执行HiClass.prototype = new HelloClass()之后,HiClass的实例中会有prop属性,这个应该很好理解。但是要注意代码中不要不小心存在这样的bug。

    示例:

    function HiClass() {  
        this.sayHi = function(){  
            alert("hi");  
        }  
    }  
      
      
    function HelloClass() {  
        this.sayHello = function(){  
            alert("hello");  
        }     
    }  
    //HiClass.prototype.prop = 'value';  //this.prop = function(){}写法是可以继承的,两种写法有区别滴
    HiClass.prototype = new HelloClass();  
    HiClass.prototype.prop = 'value';  
      
    var obj = new HiClass();  
    obj.sayHello();  
    alert(obj.prop); 

    在JavaScript中有一个prototype链,在对一个对象实例上调用方法或者获取属性的时候,先看实例对应的类有没有对应的定义,没有的话会沿着prototype链一直找,找不到则为undefined。如果某类都有

    定义,则调用本身的定义。Object.prototype.foo = function(){}会对所有以定义的方法起作用,javascript中Object对象是所有对象的基类

    示例:

    function Object2() {  
            this.sayHi = function(){  
                alert("hi Object2");  
            }  
        }  
          
        function Object3() {  
            this.sayHi = function(){  
                alert("hi Object3");  
            }  
              
            this.sayHello = function(){  
                alert("hello Object3");  
            }  
              
        }  

    Object2.prototype
    = new Object3(); var obj = new Object2(); obj.sayHi(); //hi Object2 调用obj.sayHi();的时候,sayHi在Object2里已经定义,则调用本身的定义。 obj.sayHello(); //hi Object3 Object.prototype.foo = function(){ //会对所有以定义的方法起作用,javascript中Object对象是所有对象的基类 alert("f00 Object"); }; obj.foo(); //f00 Object Object2.foo(); //f00 Object Object3.foo(); //f00 Object a.foo(); //报错

    如果在实例里添加的属性和方法与prototype里的属性和方法重名,相对于实例和prototype都有这个属性和方法,只是由于prototype链的访问顺序,先访问到实例中的属性和方法。如下面的例子说明了这一点

    function Test(){};  
      
    Test.prototype.prop1 = 'prop value';  
      
    var obj = new Test();  //obj如果是一个方法又不一样喽;obj.prototype = new Test();不会继承滴
      
    obj.prop1 = 'instance value';  
      
    alert(obj.prop1 );//outputs instance value  
      
    alert(obj.hasOwnProperty("prop1"));//outputs true  
      
    delete obj.prop1;alert(obj.prop1 ); //outputs prop value  由于prototype链的访问顺序,先访问到实例中的属性和方法,删除的是第一个属性
    alert(obj.hasOwnProperty("prop1"));//outputs false  
    alert("prop1" in obj);//outputs true  
    
    delete Test.prototype.prop1;alert(obj.prop1 );//outputs undefined

    再来看看一些构造函数和prototype的使用:

    var myObj = {  
        prop1:'value1',  
        prop2:'value2'  
    }  
      
    Object.prototype.foo = function(){  
        alert("f00 Object");  
    };  
      
    //等价于  
    //var myObj = new Object();  
    //myObj.prop1 = 'value1';  
    //myObj.prop2 = 'value2';  
      
    alert(myObj.prop2);  //value2
    myObj.foo();    // f00 Object

    同时也可以如下的方式对prototype赋值,可以一次添加多个属性和方法

    function TestCls(){  
          
    }  
    TestCls.prototype = {  //可以一次添加多个属性和方法
        prop1:'value1',  
        prop2:'value2'  
    };  
    myObj = new TestCls();  
    alert(myObj.prop2);  //value2

    上面的做法中有一个问题是改变prototype后,constructor也改变了。
    所以要将prototype.constructor之前的值,比如第一个例子中要加上 HiClass.prototype.constructor=HiClass;constructor 属性返回对创建此对象的数组函数的引用

    //上面的做法中有一个问题是改变prototype后,constructor也改变了。  
    //所以要将prototype.constructor之前的值,比如第一个例子中要加上 HiClass.prototype.constructor=HiClass  
    function HiClass() {  
        this.sayHi = function(){  
            alert("hi");  
        }  
    }  
      
      
    function HelloClass() {  
        this.sayHello = function(){  
            alert("hello");  
        }     
    }  
      
    HiClass.prototype = new HelloClass();  
    HiClass.prototype.constructor=HiClass  //constructor 属性返回对创建此对象的数组函数的引用。
  • 相关阅读:
    SpringMVC 配置文件详解
    SpringMVC 入门demo
    SpringMVC 简介
    解决IDEA部署web项目时,jar包拷贝不全的问题
    录制 带鼠标光圈效果的视频
    Spring整合Junit4进行单元测试
    Illegal invocation with document.querySelector [duplicate]
    html-webpack-template, 一个更好的html web service插件
    Script error.解决方法
    ios9 safari currentTime audio bug
  • 原文地址:https://www.cnblogs.com/LChenglong/p/6746625.html
Copyright © 2011-2022 走看看