JS難點--面向對象(封裝)

我覺得js的難點之一就是面向對象編程。

面向對象

它是一種編程思想，它在寫法上比面向過程相對來說復雜一些；

以下是我學習中關於面向對象的知識點總結：

 

1、什么是對象　

從廣義上說，"一切皆對象"；狹義上說，是一種復合數據類型Object。

  對象可以添加屬性（變量）與方法（函數）

2、創建對象的方法

　①：直接字面量  {}

var person={
    name:'jackson',
    age:30,
    sing:function(){
         console.log('beat it');
    }
};
person.height='180CM';
person.interset=function(){
    console.log('dancing');
};
            

 

 ②：使用關鍵字new    new Object()

var person1=new Object();
person1.name='jack';
person1.age=18;
person1.playgame=function(){
    console.log('王者榮耀');
};

 

3、創建完的對象有兩個特點

　　①：添加屬性(屬性的值為非函數的任意數據類型)

　　　 描述對象的特征

　　②：添加方法(方法的值為函數)

　　　 實現對象的一些功能

 

4、面向對象的寫法特點

　　①：把變量寫作屬性；

　　②：會把功能寫成一個函數；

　　③：這個函數是在對象身上的；

　　④：對象身上的功能可以繼承。

5、如何封裝一個函數

//工廠方式
function createPerson(name,age){
    var obj=new Object;
                
    obj.name=name;
    obj.age=age;
                
    obj.say=function(){
        console.log('我叫'+obj.name);
    }
                
        return obj;
}
            
var p1=createPerson('Jackson',30);
var p2=createPerson('Jack',18);
                        
p1.say();
p2.say();

6、構造函數

創建並初始化對象的函數，並且要用new來調用函數，不用new調用的話與普通的函數就沒有區別

 

 

通過構造函數new出來的對象叫實例，創造對象的過程叫實例化

構造函數存在一個問題：性能問題會造成資源浪費

function Person(name,age){
    this.name=name;
    this.age=age;
                
    this.say=function(){
        console.log('my name：'+this.name);
       };   
}
var p1=new Person('Jackson',30);        //一個實例
p1.say();
            
var p2=new Person('jack',18);        //一個實例
p2.say(); 

7、原型(prototype)

　　函數身上的屬性，每一個函數身上都有這個屬性，它的值是一個對象

　  它身上可以放屬性與方法，如果與構造函數相結合的話，通過構造函數創建的對象就會具有它身上的屬性與方法

   對象是通過構造函數創建的，那prototype就是這個對象的原型對象

   建議把一些公用的屬性或者方法都放到構造函數的原型身上，這樣就可以解決構造函數的性能問題。

 

8、__proto__

　　對象身上的屬性，每一個對象身上都會有這個屬性。它的值也是一個對象，它的值就是它對應的構造函數的prototype的值

　　對象.__proto__===構造函數.prototype

 

　　對象之所以能夠繼承原型身上的屬性與方法，是因為每個對象身上都有一個__proto__，那__proto__的值指向了構造函數的prototype

function Person(name,age){
    this.name=name;
    this.age=age;
}
            
Person.prototype.gender='男';
Person.prototype.say=function(){
    console.log('my name:'+this.name);
};
            
var p1=new Person('Jackson',30);        //一個實例
var p2=new Person('Jack',18);        //一個實例
            
console.log(p1.__proto__===Person.prototype);     //true

9、原型鏈

　　對象與原型之間的關系（鏈接）

　　原型鏈查找規則

　　　　當我們調用一個對象身上的屬性或者方法的時候，它就會有一個查找規則

　　　　①：首先會在自身去找，如果有的話就用自己的；

　　　　②：如果沒有的話，它就在該對象的__proto__下查找，因為__proto__這個屬性是指向對應的構造函數身上的protytpe，把它查找的時候找的就是構造函數的原型

　　　　③：如果原型身上也沒有的話，那它會繼續往外面找，直到找到最頂層的Object身上的prototype，如果都沒有，則返回undefined

 

10、面向對象的寫法

function 構造函數(){
    this.屬性＝??;
}
構造函數.prototype.方法=function(){}
            
var 實例對象=new 構造函數();
實例對象.方法();

 11、constructor

 概念：每個對象身上都會有這個屬性，默認指向該對象對應的構造函數

 　　 這個屬性不是放在對象身上，放在對應的原型對象身上

 作用：查看對象的構造函數

 語法：對象.constructor

 返回值：對象的構造函數

 問題：這個屬性是可以被修改的，所以最好重新指向一下

 

function Coder(name){
    this.name=name;
}
Coder.prototype={
    constructor:Coder,   //重新指向，防止改變它的構造函數
    age:18,
    gender:'男'
};