javascript 原型

1.對象能夠經過constructor.prototype 訪問原型
    Object.constructor.prototype.constructor.prototype...
    最終訪問到Object這個對象<br/>javascript

    2.對象的自身屬性優先級高於原型屬性,能夠利用添加自身屬性重寫原型屬性<br/>
    <script type="text/javascript">
        function Person(name){
            if (name) {//注意這裏不作判斷 this.name = undefined
                this.name = name;
            }
        }
        Person.prototype.name = 'lee';java

        var p = new Person('tom');
        console.log(p.name);
        delete(p.name);
        console.log(p.name);
    </script>數組


    3.對象用for-in枚舉的時候不是全部的屬性度會顯示(length,constructor...),
    能夠經過propertyIsEnumberable()判斷屬性是否是可枚舉屬性<br/>函數


    4.枚舉的時候,原型鏈中的各個原型屬性也會被枚舉出來,枚舉屬性能夠經過hasOwerProperty()
    <script type="text/javascript">
    console.log('===========================================');
        function Animal(name,color){
            this.name = name;
            this.color = color;
            this.eat = function(){
                console.log('I can eat!');
            }
        }
        Animal.prototype.price = 200;
        Animal.prototype.sleep = function(){
            console.log('I can sleep!');
        }
        //原型屬性也會被枚舉
        var dog = new Animal('little white','white');
        for (var i in dog) {
            console.log(dog[i]);
        }
        console.log('===========================================');
        //枚舉自身屬性
        for (var i in dog) {
            if (dog.hasOwnProperty(i)) {
                console.log(dog[i]);
            }
        }
    </script>測試


    5.isPrototypeOf() 判斷對象是不是另外一個對象的原型
    <script type="text/javascript">
    console.log('===========================================');
        var monkey = {
            eye:'yes',
            hair:'yes',
            eat:function(){
                console.log('monkey can eat!');
            }
        };
        function Human(name,age){
            this.name = name;
            this.age = age;
            this.eat = function(){
                console.log('Everyone can eat!');
            }
        }this

        Human.prototype = monkey;
        var p2 = new Human('lili',23);
        //monkey 是 p2 的原型
        console.log(monkey.isPrototypeOf(p2));
    </script>prototype


    6.內建對象的構造器函數(Array,String,Object,Function),均可以經過原型進行擴展
    <script type="text/javascript">
        console.log('===========================================');
        //給Array添加一個inArray 判斷數組中是否存在特定的值,讓全部的數組類型都能調用
        Array.prototype.inArray = function(val){
            for (var i = 0; i < this.length; i++) {
                if (this[i] === val) {
                    return true; //存在
                }
            }
            return false;//不存在
        }
        //測試inArray()方法
        var arr = ['red','blue','green'];
        var result = arr.inArray('blue');
        console.log(result);
    </script>
    注意:想要爲某個對象添加新屬性時,務必先檢查一下該屬性是否已經存在對象


    7.關於原型的陷阱
    (1)當對原型對象徹底替換時,在原型鏈中會引起一些異常
    (2)prototype的constructor屬性是不可靠的ip

    <script type="text/javascript">
    console.log('===========================================');
        function Dog(){this.tail = true;}原型鏈

        var dog1 = new Dog();
        var dog2 = new Dog();

        Dog.prototype.say = function(){ 
        //這裏在原型上添加一個say()方法,dog1和dog2能夠訪問對象建立以後添加在原型上的方法
            console.log('woof!');
        }
        dog1.say();
        console.log(dog1.constructor);
        dog2.say();
        console.log(dog2.constructor);
        console.log('===========================================');
        //可是值得注意的是,下面訪問的是原型對象的構造器,返回的是Dog()構造函數,卻沒有Dog()的屬性,就不太對了
        var constru = dog1.constructor.prototype.constructor
        console.log(constru);
        var prop = dog1.constructor.prototype.tail;
        console.log(prop);

        //這個時候在用一個新的對象重寫原型
        Dog.prototype = {
            name:'kk',
            age:2
        }
        console.log(dog1.name);//原有對象不能訪問到原型的新屬性
        console.log(dog1.say);//可是依舊能訪問到原來的屬性
        var dog3 = new Dog();
        console.log(dog3.name);//新建立的對象能夠訪問新添加的屬性
        console.log(dog3.say);//可是卻訪問不到原有的屬性

        //而且,新的對象的__proto__也指向了新的原型對象
        //dog3.constructor 卻指向了Object

        //因此 最佳實踐是在重寫對象的prototype時,重置constructor 是個好習慣         Dog.prototype = {             name:'aa',             age:12         }         Dog.prototype.constructor = Dog;     </script>

相關文章
相關標籤/搜索