JavaScript中幾個重要的知識點（1） ---- 面向對象

acrazing 發布于2019-08-20 17:32 / 1795人閱讀

摘要：中幾個最重要的大知識點面向對象事件異步交互面向對象在中可以把任意的引用和變量都看成是一個對象。我們可以寫一個通用方法來模擬面向對象語言的多態

JavaScript中幾個最重要的大知識點

面向對象

DOM事件

異步交互ajax

面向對象

在JS中可以把任意的引用和變量都看成是一個對象。面向對象的主要三個表現形式：

封裝

繼承

多態

1. 封裝

1.1 單例模式

var obj={
    name: "sam",
    age: 12,
    method: function(){
        var objName=this.name;
        return objName;
    },
    ale: function(){
        var that=this;
        function sum(num1,num2){
            this.num=that.age;
            return num1+this.num+num2;
        }
        console.log(sum(1,2));
    }
}

單例模式有不污染全局變量和節約window棧內存的優點

var main={
    init:function(){
        this.changeName();
    },
    changeName:function(){
        var that=this;
        var oBody=document.body;
        oBody.onclick=function(){
            that.changeValue();
        }
    },
    changeValue:function(){
        document.getElementById("one").value="sam";
    }
}

main.init();

1.2 工廠模式

能夠快速地根據不同需求，傳入不同參數，來返回不同的對象，缺點是不能判斷對象的類型

function self(name,age,sex){
    var person={};
    person.name=name;
    person.age=age;
    person.sex=sex;
    if(sex=="man"){
        person.job="coder";
    }
    if(sex=="woman"){
        person.job="beatiful";
    }
    return person;
}
var mine=self("sam",22,"man");
console.log(mine.job);

1.3 構造函數模式

構造函數模式能夠解決工廠模式不能判斷對象類型的缺點，構造函數模式能夠自定義類，構造具有相同屬性和方法的實例

function Person(){
    this.eat="food";
    this.sleep="night";
    this.say=function(){
        console.log("I am person,I can speak");
    }
}
var person1=new Person();
person1.say();

call()和apply()方法

call()方法：
讓調用對象執行，然后第一參數是誰，調用對象的this就改變指向是誰，后邊跟參數，依次對應傳入

apply()方法：
讓調用對象執行，然后第一參數是誰，調用對象的this就改變指向是誰，后邊跟參數，以數組的形式傳入

2.繼承

2.1 原型繼承

把被繼承者的構造函數賦值給繼承者的prototype，注意需要給繼承者的prototype手動添加constructor屬性

function A(){
    this.name="A";
    this.sayHi=function(){
        console.log("Hi!I am A");
    }
}

function B(){
    this.name="B";
    this.age=22;
    this.sayHi=function(){
        console.log("Hi,I am B");
    }
}
B.prototype.work=function(){
    console.log("I can play");
}

A.prototype=new B();
A.prototype.constructor=A;
var a=new A();
console.log(a);

2.2 call / apply 繼承

把被繼承者設置的私有屬性，克隆一份作為繼承者私有的

function A(){
    this.name="A";
    this.age=22;
    this.sayName=function(){
        console.log("I am A");
    }
}

function B(){
    A.call(this);
}

var b=new B();
console.log(b);

2.3 冒充對象繼承

繼承者繼承了被繼承者私有和公有的屬性和方法

function A(){
    this.x=100;
}
A.prototype.getX=function(){
    console.log(this.x);
}

function B(){
    var temp=new A();
    for(var key in temp){
        this[key]=temp[key];
    }
}

var b=new B();
console.log(b);

3. 多態

javascript中沒有嚴格的多態，因為JS中沒有重載，相同名字的函數不能同時存在，后定義的重名函數會覆蓋先定義的函數（即使兩個形參不相同）。我們可以寫一個通用方法來模擬面向對象語言的多態

function simPoly(){
    if(arguments.length==1){
        return function(){
            console.log(1);
        }
    }
    if(arguments.length==2){
        return function(){
            console.log(2);
        }
    }
}

simPoly(1,2)();

GPU云服務器云服務器面向對象知識 javascript 面向對象 javascript面向對象 javascript面向對象編程

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

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

JavaScript中幾個重要的知識點（2） ---- DOM事件

摘要：使用來移除事件，參數必須與要移除的事件處理函數地址指針相同。在低版本瀏覽器中，綁定級事件的方法為中的級事件的事件處理程序都是在冒泡階段執行的。 JavaScript中幾個最重要的大知識點面向對象 DOM事件異步交互ajax 事件事件就是文檔和瀏覽器的瞬間交互行為 1.事件類型點擊: click 滾輪: scroll 滑動: move 進入: enter 加載: load ...

dantezhao 2019-08-20 17:33 評論0 收藏0
JavaScript中幾個重要的知識點（3） ---- Ajax

摘要：與響應不同的是，身份驗證并不能提供任何幫助，而且這個請求也不應該被重復提交。 JavaScript中幾個最重要的大知識點面向對象 DOM事件異步交互ajax AJAX AJAX是異步的javascript和xml（Asynchronous Javascript And XML）的縮寫，用于網頁局部刷新，提升用戶瀏覽體驗通常前端程序員關于AJAX的掌握僅僅停留在會用AJAX發送...

starsfun 2019-08-20 17:36 評論0 收藏0
Javascript中幾個看起來簡單，卻不一定會做的題

摘要：作為前端開發必須掌握的一門語言，因為語言的靈活性，有些知識點看起來簡單，在真正遇到的時候，卻不一定會直接做出來，今天我們就一起來看看幾道題目吧題目這道題考察的知識點是運算符的優先級。 Javascript作為前端開發必須掌握的一門語言，因為語言的靈活性，有些知識點看起來簡單，在真正遇到的時候，卻不一定會直接做出來，今天我們就一起來看看幾道題目吧題目1 var val = smtg; ...

itvincent 2019-08-22 15:43 評論0 收藏0
css中幾個重要概念

摘要：包含塊是一個相對的概念，比如子元素的初始化布局總是在父元素的左上角，這就是一個相對的概念。每個元素都會生成一個包含塊，但這個包含塊是虛無的，你看不到也摸不著，只是一個概念。這個屬性在新的版本中已經移除了，可以不用關注該屬性了。替換元素與非替換元素替換元素：是指瀏覽器根據元素的標簽和屬性來決定元素的具體內容。例如瀏覽器會根據標簽的src屬性的值來讀取圖片信息并顯示，瀏覽器會根據i...

darkbug 2019-08-29 15:37 評論0 收藏0
css中幾個重要概念

摘要：包含塊是一個相對的概念，比如子元素的初始化布局總是在父元素的左上角，這就是一個相對的概念。每個元素都會生成一個包含塊，但這個包含塊是虛無的，你看不到也摸不著，只是一個概念。這個屬性在新的版本中已經移除了，可以不用關注該屬性了。替換元素與非替換元素替換元素：是指瀏覽器根據元素的標簽和屬性來決定元素的具體內容。例如瀏覽器會根據標簽的src屬性的值來讀取圖片信息并顯示，瀏覽器會根據i...

piapia 2019-08-26 12:00 評論0 收藏0