js高級之對象的基本知識

對象是什麼?

對象是一種特殊的數據結構,是對事物特徵特和行爲的抽象,包括屬性和方法

創建對象的方式

1、基本方法創建

var stu={

           name:'zs',

           age:20,

           score:{

              math:90,

              chinese:80

           },

           hobby:['singe','dance'],

           eat:function(){

              console.log(this.name+'eat apple~')

           }

       }

console.log(stu.name+' '+stu.age+' '+stu.score.chinese);

stu.eat();

 

2、工廠方法  

  var Product=function(title,price){ //函數首字母大寫

           return{

              title:title,

              price:price,

              buy:function(){

                  console.log('買了'+this.title);

              }

           }

       }

       var pro1=new Product('電腦',5000);

       var pro2=new Product('手機',1800);

       pro1.buy();

       pro2.buy();

       // 此時內存地址不相等,結果爲false

       console.log(pro1.buy==pro2.buy);

3、構造函數方式 

​
      function Person(name,sex){

           this.name=name;

           this.sex=sex;

           this.eat=function(){

              console.log(this.name+'吃了');

           };

       }

       /*

       實例化對象步驟

       (1)創建空對象

       (2)this指向的是當前的實例化對象

       (3)執行構造函數代碼

        */

       var person1=new Person('Li','男');

       var person2=new Person('Hu','女');

       person1.eat();

       person2.eat();

       // 此時內存地址不相等,結果爲false

       console.log(person1.eat==person2.eat);

​

 

4、構造函數+原型方式(通常使用)

       function Car(name,price){

           this.name=name;

           this.price=price;

       }

       Car.prototype.drive=function(){

           console.log(this.name+'可以每天開10公里');

       }

       var car1=new Car('碰碰車',1000);

       var car2=new Car('單車',500);

       // 此時內存地址相等,結果爲true

       console.log(car1.drive==car2.drive);

 

對象的基本知識點        

1、什麼是原型(prototype)

每一個構造函數,都有一個prototype屬性,這個屬性是一個指針,指向一個對象,這個對象的用途可以包含由構造函數而創建的那個對象實例的原型對象。prototype就是通過調用構造函數而創建的那個對象實例的原型對象。該對象的屬性和方法都能夠被構造函數的實例繼承。

 

ps:構造函數的方法一般放進原型裏,他們內存地址一樣,有利於節約內存空間。

 

2、原型鏈?

原型鏈:當從一個對象那裏調取屬性或者方法時,如果該對象自身不存在這樣的屬性或方法,就會去自己關聯的prototype對象那裏尋找,如果property沒有,就回去prototype關聯的前輩prototype那裏尋找,如果再沒有則繼續查找prototype.prototype引用的對象,以此類推,直到prototype.···.prototype爲undefined,從而形成了所謂的原型鏈。

 

Object是頂層對象,所以對象都繼承自他

Object的prototype就是undefined

 

3、判斷 實例對象a 是否是 構造函數b 的實例化對象

(1)a.constructor==b 不推薦使用,重寫prototype中方法時可能會丟失constructor屬性

(2)a instanceof b 推薦使用

       console.log(car1.constructor==Car);

       console.log(car1 instanceof Car);

 

4、重寫原型中的方法的兩種方式

(1)構造函數名.prototype.方法名=function(){}

此時相當於在原型中改寫了drive方法,新增了buy方法,constructoe屬性也還在

       Car.prototype.drive=function(){

           console.log('重寫的drive方法1');

       }

       Car.prototype.buy=function(){

           console.log('購買了'+this.name);

       }

       console.log(Car.prototype);

       console.log(Car.prototype.constructor);

       var car3=new Car('奔馳',100000);

       car3.drive();

 

(2)構造函數名.prototype={

                             函數名:function(){},

                             函數名:function(){}

}

此時相當於給prototype對象重新賦值,相當於裏面所有的東西都被清掉了,constructor屬性丟失

Car.prototype={

           // constructor:Car, //此時可加上constructor屬性

           drive:function(){

              console.log('重寫的drive方法2');

           },

           buy:function(){

              console.log('重寫的buy方法2');

           }

       }

       console.log(Car.prototype);

       console.log(Car.prototype.constructor);

       var car3=new Car('奔馳',100000);

       car3.drive();

       car3.buy();

      

5、判斷 屬性b 是 對象a 的自有屬性還是繼承屬性 a.hasOwnProperty('b')

       var car4=new Car('寶馬',200000);

       car4.look=function(){

           console.log('look是我自己的方法');

       }

       // 相當於給car4對象新增了dirve方法,此時對象中有了dirve方法,就不會到prototype中繼承drive方法了

       car4.drive=function(){

           console.log('drive是我自己的方法');

       }

       console.log(car4.hasOwnProperty('look'));

       car4.drive();

       console.log(car4.hasOwnProperty('drive'));

 

6、prototype與__proto__的關係,實例對象constructor(實例對象繼承了prototype的constructor)與構造函數的關係(兩條下劃線)

實例對象的__proto__指向構造函數的prototype, 實例對象的constructor則指向構造函數


       console.log(Car.prototype==car4.__proto__);

       console.log(car4.constructor==Car);

 

7、判斷 a對象的prototype對象 是否存在於 另一個對象b 的原型鏈中a.prototype.isPrototypeOf(b)

         console.log(Car.prototype.isPrototypeOf(car4));

         console.log(Object.prototype.isPrototypeOf(car1));

 

 

8、this的指向問題

(1)普通函數:this指向window

(2)事件函數:this指向事件源

(3)構造函數:this指向實例化對象

(4)基本對象:this指向當前對象

        function a(){

           console.log(this);

        }

        a();



        btn.onclick=function(){

           console.log(this);

        }



        function C(name){

           this.name=name;

        }

        var c=new C('小明');

        

        c.printName=function(){

           console.log(this.name);

        };

        c.printName();



        console.log(car3.constructor==Car);

最後是自己簡單畫的構造函數、實例化對象、prototype對象和Object的關係圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章