JavaScript里的面向對象心得

Kerr1Gan 發布于2019-08-21 16:57 / 1641人閱讀

摘要：一面向對象的概念面向對象是一種編程思想對象可以添加屬性變量和方法函數面向對象寫法特點把功能寫成一個函數函數必須寫在對象身上，調用的時候直接拿對象方法名對象身上的功能可以繼承指向，在事件或者定時器里面是訪問不到真正的的，需要在外面存一下寫法示

一、面向對象的概念

面向對象是一種編程思想

對象：可以添加屬性（變量）和方法（函數）；
面向對象寫法特點：

    1、把功能寫成一個函數；
    2、函數必須寫在對象身上，調用的時候直接拿對象.方法名()；
    3、對象身上的功能可以繼承；
    4、this指向，在事件或者定時器里面是訪問不到真正的this的，需要在外面存一下；

寫法示例：
        function 構造函數 (){
            this.屬性=??；
        }
        構造函數.prototype.方法=??;
        
        var 實例=new 構造函數();
        實例.方法();

二、new的作用

一元運算符，后面只能接函數，用來調用函數；

用new調用函數的過程：

    1、構建一個空對象；
    2、把函數內部的this指向創建的對象；
    3、在函數執行完以后自動返回剛才創建的那個對象，即使函數里面沒有return；假如函數后面有return的話會有兩種情況：
        A 、return后面是對象的話，則返回這個對象；
        B 、return后面是非對象的話，則返回一開始new創建的對象；

注意：

    1、用new調用的函數永遠返回一個對象，不管有沒有返回值；
    2、用new調用函數，這個函數一定是用來創建對象的，叫做構造函數；

三、構造函數

創建并初始化對象的函數，并且必須用new調用，不然和普通函數沒有區別；

        functon Person(name,age){
            this.name=name;
            this.age=age;
            this.say=function{
            console.log("my name is"+this.name);
            };
        };

new出來的都是構造函數的實例，構造函數就是實例化的過程；
構造函數的問題：性能問題會造成資源浪費；

四、原型 prototype

概念：函數身上的屬性，每個函數都有，它的值是一個對象；

用途：因為它是一個對象，所以身上可以放屬性和方法，如果與構造函數相結合，通過構造函數創建的對象就會具有原型身上的屬性和方法；

建議把一些共用的屬性和方法放在構造函數的原型身上；

五、__proto__

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

實例.__proto__===構造函數.prototype;這句話解釋了為什么實例能夠繼承構造函數身上的屬性和方法；

    functon Person(name,age){
        this.name=name;
        this.age=age;
    };
    this.prototype.say=function{
    console.log("my name is"+this.name);
    }; 
                
    var p1=new Person("peter",18);

  在這個例子中：p1.__proto__=Person.prototype;所以p1才能繼承Person構造函數身上的屬性和方法；

六、原型鏈

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

原型鏈查找規則：

七、包裝對象

在js中，當我們去調用字符串，布爾值，數字的屬性和方法的時候，js會在內部把這些基本數據類型轉變成一個對應的對象類型（包裝對象），然后再調用這個包裝對象的屬性和方法；

包裝對象有：

String

Number

Boolear

注意：

null和undefined沒有包裝對象；

基本數據類型只能使用對應的包裝對象身上的屬性和方法；

八、hasOwnProperty

作用:判斷一個屬性是不是自己對象身上的;

語法:對象.hasOwnProperty(屬性);
參數:要檢測的屬性;

返回值:

**true**         *自身屬性*
**false**        *非自身屬性*

注意:

1、這個方法是Object身上的方法    
2、不會順著原型鏈往外面去查找屬性，只查找自身

九、constructor

概念: 每個對象身上都會有這個屬性，默認指向該對象對應的構造函數;
這個屬性不是放在對象身上，放在對應的原型對象身上;

作用:查看對象的構造函數;
語法:對象.constructor;
返回值:對象的構造函數;他可以用來做數據類型的判斷;

 constructor的問題    ：constructor的值是可以修改的；
 
    function Person(name){
        this.name=name;
    }
    var p1=new Person("kaivon");
    console.log(p1);
    console.log(p1.constructor==Person);    //true
            
    p1.constructor=Array;
    console.log(p1.constructor==Array);        //true

十、 toString

作用：把對象類型轉成字符串；

注意：系統對象身上的這個方法都是在對應的原型身上；而自己寫的構造函數這個方法在達的Object原型身上

它可以用來做類型判斷：

Object.prototype.toString.call( );

//用toString做類型判斷
        var num=0;                  //[object Number]
        var str="kaivon";           //[object String]
        var b=true;                 //[object Boolean]
        var n=null;                 //[object Null]
        var u=undefined;            //[object Undefined]
        var arr1=[];                //[object Array]
        var obj1={};                //[object Object]
        var fn=function(){};        //[object Function]
        var d=new Date();           //[object Date]
        var re=new RegExp();        //[object RegExp]
        
        console.log(Object.prototype.toString.call(num));

十一、淺拷貝與深拷貝

基本數據類型復制：

var num1=123;
var num2=num1;//那么num2和num1就是一樣的，**復制了值**

復雜數據類型復制的問題：

var arr1=[1,2,3];
var arr2=arr1;

arr2.push(4);
//注意這個時候arr1和arr2的值；
console.log(arr2);              //[1,2,3,4]
console.log(arr1);              //[1,2,3,4]

arr1和arr2一樣的原因：復雜數據類型復制的時候不僅僅是復制了值，還復制了引用地址，所以修改arr2時，那么arr1的地址和arr2其實還是一樣的，所以arr1的值也相應改變了；

思考：那么我們應該如何復制復雜數據類型？

淺拷貝；

var obj1={a:10,b:20};               //如何復制呢？

function copy(obj){
    var newObj={};
    for(var attr in obj){
        newObj[attr]=obj[attr];
    }
    return newObj;
}
var obj2=copy(obj1);
//這時候的obj2和obj1看起來是一樣的，但是其實是不同的，有不同的引用地址；

深拷貝

深拷貝和淺拷貝的區別：
1、當要復制的那個對象里面所有的值都是非對象的時候，用淺拷貝；
2、當要復制的那個對象里面有對象的時候，用深拷貝；

var obj1={
    a:10,
    b:{
        c:20    //這時候對象里面還有對象；這時候怎么辦呢？
    }
}

//如果這時候還用上面的淺拷貝的話，那么修改復制后的值，原來對象里面的值也還是會改變，所以要用下面的辦法；

function deepCopy(obj){
    if(typeof obj!=="object"){
        return obj;
    }
    //上面的代碼是給了一個跳出條件，當傳入的條件不是對象的時候就不需要遞歸了；
    if(obj instanceof Array){
        var newObj=[];
    }else{
        var newObj={};
    }
    for(var attr in obj){
        newObj[attr]=deepCopy(obj[attr]);
        //遞歸；當對象里面的值還是對象的時候需要用到；
    }
    return newObj;
}

十二、繼承 概念：

讓一個對象擁有另一個對象的屬性和方法，并且自己添加的屬性和方法不會影響原來的對象；

屬性繼承:

通過call的方法調用構造函數來繼承屬性；

function Person(name,age){
                this.name=name;
                this.age=age;
            }
Person.prototype.say=function(){
                console.log("我叫"+this.name);
            }
//Person相當于一個大類，Coder相當于一個小類，他們是有共同的地方的；
function Coder(name,age,job){
                this.name=name;
                this.age=age;
                this.job=job;
            }
Coder.prototype.say=function(){
                console.log("我叫"+this.name);
            }
//通過屬性繼承，我們可以將小類和大類共同的部分簡化如下：
function Coder(name,age,job){
                Person.call(this,name,age);
                
    //如果不用call的話，那么this的指向就是window了，所以要用call將指向指到當前的this上面；
                this.job=job;
            }

方法繼承：

通過for in 想要繼承的構造函數的原型的方法去去繼承；

參考屬性繼承?的代碼：

for (var attr in Person.prototype){
    if(Person.prototype.hasOwnProperty(attr)){
        Coder.prototype[attr]=Person.prototype[attr];
    }
}

十三、組件 概念

把一個效果或者方法用面向對象的方法封裝起來，只提供給用戶一些相關的方法和數據接口；（模塊化）

特點

易擴展、易維護、相互之間沒有影響

組件的組成: 一、配置參數

放在初始化函數里；

初始化函數放在構造函數的原型身上，一般用init表示

需要寫一個默認參數放在構造函數里面；

function Drag(obj){
    this.disX=0;
    this.disY=0;
    //下面的就是默認參數，下面的函數都要用下面的參數；
    this.settings={
        id:"",          //這是必傳的；
        downFn:function{},
        moveFn:function{},
        upFn:function{}
    }
}
//下面這個叫做初始化函數；
Drag.prototype.init=function (opt) {
    //在初始化函數里面，拿用戶輸入來的參數覆蓋默認參數；
    for(var attr in this.settings){
        if(this.settings.hasOwnProperty(attr)){
        //如果默認參數里面有這個屬性的話，才會去覆蓋；
            this.settings[attr]=opt[attr];
        }
    }
    this.obj=document.getElementById(this.settings.id);
}
//用戶傳進來的就叫做配置參數；是一個對象；

二、方法

放在原型里的函數；

三、自定義事件

概念：

除了系統自帶以外的事件叫做自定義事件；

有利于多人協作開發，可擴展js事件；

需要用到事件綁定，事件觸發器；

自定義事件其實就是調用函數，在指定的環境下讓事件觸發；

自定義事件三要素：

對象；

事件名；

事件處理函數；

可以利用對象數據結構里面的key:value鍵值對的方式去把事件名和事件處理函數聯系起來；把多個函數放到一個數組里面，循環數組里面的每個函數；

//定義事件
object.events={
    "事件名1":[fn1,fn2],
    "事件名2":[fn3,fn4,fn5]
}

//調用事件（循環去調用）

代碼實現示例

//事件綁定器，添加自定義事件；
function customEvent(obj,eventName,fn){
    /*  obj         對象名；
     *  eventName   對象的一個事件名，它的值是一個數組；
     *  fn          事件調用函數，它在數組里面；
     */
    //這里的"||"邏輯符號的意思是左邊為真走左邊，左邊為假走右邊；
    obj.events=obj.events||{};
    obj.events[eventName]=obj.events[eventName]||[];
    obj.events[eventName].push(fn);//push方法把函數添加到數組；
}
//事件觸發器；
function(obj,eventName){
    //觸發的時候要看看對象身上有沒有這個事件；
    if(obj.events[eventName]){
        for(var i=0;i

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88951.html

JavaScript 踩坑心得— 為了高速（上）

摘要：集裝箱化集裝箱化集裝箱化以下是部分原因集裝箱化會迫使你遵從應用開發大原則。通過集裝箱化，可以實現開發階段測試以及生產環境的對等。實現環境集裝箱化的理由還有很多很多，一旦掌握了基本知識，集裝箱化就不難實現。一.前言很多情況下，產品的設計與開發人員一直想打造一套高品質的解決方案，從而快速、平穩地適應產品迭代。速度是衡量產品適應性的真正且唯一的標準，而且，這并不是筆者的一家之言。「速度...

魏憲會 2019-08-19 17:51 評論0 收藏0
再和“面向對象”談戀愛 - 面向對象編程概念（三）

摘要：說到底面向對象才是程序語言的根本。其實面向對象編程說的就是自定義對象。里并沒有類的概念，所以嚴格上來講這是個假的面向對象里的面向對象編程現在好了，終于聽到別人鄙視我們了，給我們提供了類這個概念，其實是向傳統語言更靠齊了。通過前兩篇文章，我們了解了對象的概念以及面向對象里的相關概念等知識，那前面說了對象分類里的前兩種，這篇文章要詳細去說第三種自定義對象，那真正的好戲這就來了！面向對象...

Cruise_Chan 2019-08-23 10:45 評論0 收藏0
關于javaScript面向對象寫法以及new操作符

摘要：屬性屬性當我們通過關鍵字構造函數實例化創建一個對象時，這個對象里面含有屬性，屬性指向構造函數屬性以及屬性下面的對象。眾所周知，JavaScript是一門面向對象的操作語言，而我們想要用JavaScript對象化寫法的時候，不得不提出一個操作符，叫做new操作符，那么不用new操作符和用new操作符有什么區別呢？ 1.用new和不用new的區別首先，我們去看下new在JavaScri...

endless_road 2019-08-19 18:44 評論0 收藏0
后端語言選型淺談

摘要：再往后來，也就是這種以事件循環常駐內存為特點的后端平臺，姑且能算是第四代后端平臺。前不久回答了一個關于后端語言選型的問題，寫的回答也讓筆者有了很多感觸，因此在這里談論下自己對后端語言選型的心得體會，姑且算是拋磚引玉，希望大家能分享各自的心得。后端語言發展歷史 Web 后端語言的興起是從靜態網頁向動態網頁的發展所產生的，最早的動態頁面技術就是 CGI 技術，將客戶端的輸入交給 CGI...

xcc3641 2019-06-27 14:09 評論0 收藏0
后端語言選型淺談

摘要：再往后來，也就是這種以事件循環常駐內存為特點的后端平臺，姑且能算是第四代后端平臺。前不久回答了一個關于后端語言選型的問題，寫的回答也讓筆者有了很多感觸，因此在這里談論下自己對后端語言選型的心得體會，姑且算是拋磚引玉，希望大家能分享各自的心得。后端語言發展歷史 Web 后端語言的興起是從靜態網頁向動態網頁的發展所產生的，最早的動態頁面技術就是 CGI 技術，將客戶端的輸入交給 CGI...

alighters 2019-08-14 14:26 評論0 收藏0