面向對象簡介

面向過程就是親力親為，事無巨細，步步緊跟，不能跳過（做飯過程）

面向對象：找一個對象，指揮得結果。（叫外賣，不關注怎么做飯，求結果）

函數也是對象，指函數封裝性。（用來不告訴你核心怎么實現，但可以給你用）

面向對象實質上是對面向過程的封裝，但不是對面向過程的替代

在jq中

$(‘ #dv’) //找id=dv的對象$( ‘ <div></div>’).appendTo(body)//封裝div對象到body中$(body).append(‘<div></div>’)跟2相同

?

什么叫面向對象開發？使用對象開發

js面向對象特性（*）抽象、封裝、繼承

js中的對象：鍵值對的集合

描述人物：name，age，gender ?????{name: ‘zs’, age:18, gender : 1}

?

抽象：

如果需要用一個對象描述一個數據，需要抽取這個對象的核心數據，

不在特定條件下不知道是什么

?

封裝：

對象是將數據與功能組合到一起，即封裝

js對象就是鍵值對的集合

鍵值如果是數據（基本數據，復合數據，空數據）

如果鍵值是函數，那么就稱為方法

對象就是將屬性與方法封裝起來

方法是將過程封裝起來

?

繼承：

簡單理解就是自己沒有，繼承別人的拿過來。是實現復用的手段，即把別人的拿過來用。

了解：在面向對象語言中（如：java、c++）類是模版，規定了一個對象應該有什么屬性方法，js則使用構造函數定義屬性方法

另一個模版的成員，那么由該模版創建出來的對象就同時擁有兩個模版對象

js沒有明確的繼承語法，一般都是按照繼承的理念實現對象成員擴充實現繼承

最簡單的方法叫混入（mix）如下：

function mix(o1,o2) { //在jq中將此函數命名為extendfor (var k in o2) {o1[k] = o2 [k];}}var o1 = { name :"zhangdan"}var o2 = { age : 19};mix (o1, o2); //就是將o2 的成員一一加到o1中，使得o1具有兩個對象的屬性//1、首先找對象//2、任何操作應該交給對象完成//面向過程代碼//任務需求：//1、創建一個div標簽var div = document.createElement('div');//2、將div加到頁面中 document.body.appendChild(div);//3、設置div的樣式div.style.border = '1px solid red';//面向對象的方式去思考：//1、抽取對象（名詞提煉法）：div，body//2、分析屬性與方法（動詞提煉）：加到，設置樣式function DivTag() {this.DOM = document.createElement('div');this.appendTo = function (node) {node.appendChild( this.DOM);};this.css = function(option) {for (var k in option) {this.DOM.style[k] = option[k];}}}var divTag = new DivTag();divTag.appendTo(document.body);divTag.css({'border': '10px solid red','width': '400px','height': '100px','background-color': 'blue'}); 中級面向對象//面向對象的方式去思考：//1、抽取對象（名詞提煉法）：div，body//2、分析屬性與方法（動詞提煉）：加到，設置樣式function DivTag() {this.DOM = document.createElement('div');this.appendTo = function (node) {node.appendChild( this.DOM);return this;//如果沒有會返回undefined 不能如下使用 };this.css = function(option) {for (var k in option) {this.DOM.style[k] = option[k];}return this;;//如果沒有會返回undefined 不能如下使用 }}new DivTag().appendTo(document.body).css({'border': '10px solid red','width': '400px','height': '100px','background-color': 'pink'});new DivTag().appendTo(document.body).css({'border': '13px solid green','width': '300px','height': '200px','background-color': 'pink'}); //思考：
//1、輸入的時候寫的是函數的定義，為什么輸出是undefined //在js中函數是一等公民，是一個非常普通的對象 //聲明一個函數沒有值 //條件斷點：當瀏覽器認為你的條件為真時，起作用

?

為什么要學面向對象

面向對象是一種思考問題的方式，幫我們封裝內容方便未來調用。

對象可以屏蔽一些東西，提取對象特定的行為屬性；

// 面向對象example var hero = new Object(); // 屬性-特征 名詞 hero.name = "xm"; hero.level = 0; hero.diamond = 0; console.log(hero.name); // 方法--行為 動詞 hero.moveLeft = function () { console.log("left"); }; hero.attack = function (name) { // 只有在當前hero對象的方法中，this才是當前hero對象 console.log(this.name + "attack" + name); }; // 調用對象的方法 hero.attack("xjj"); // new Object()； // 1、內存中開辟空間，存儲創建的對象,這個對象沒有屬性和方法（除開系統內置） // 2、返回剛剛創建的對象 // 3、Object構造函數第一個字母要大寫 // 函數跟方法的區別 // 函數：直接調用的是函數； 方法：通過對象調用的函數是對象的方法 // 自定義構造函數-構造一個對象，并且返回的函數，注意首字母大寫 function Person(name, age, sex) { // 不需再new Object } // 1、開辟內存空間，存儲新創建的對象new Object（） //誰調用的this？？？重點 // 2、會把this 作為當前的對象 // 3、執行函數內部的代碼，設置對象的屬性和方法 // 4、返回新創建的對象var a = new Object(); //對象：無序對象的集合，我們可以把對象當作鍵值對來用 //動態給對象增加屬性 for (var i =0 ; i<10;i++) { a["n" + i] = i; }

?

Review:

1、什么是對象？

　　A、一組無序屬性的集合

　　B、對象可看成鍵值對

　　C、屬性可以包含基本值、對象和函數

2、對象的組成

　　A、屬性 == 特征 名詞

　　B、方法--行為 ?動詞

　　C、將來還有事件

3、函數和方法的區別

　　A、函數：直接調用的是函數 example：alert（）

　　B、方法：通過對象調用的是方法 hero.Attack（）；

4、構造函數

　　A、構造函數的目的是用來創建對象

　　B、使用new Object（）創建對象

　　C、封裝函數創建多個對象

　　D、自定義構造函數

　　　　1、內存開辟空間，存儲新創建的對象new Object（）

　　　　2、會把this設置為當前對象

　　　　3、執行函數內部的代碼，設置對象的屬性和方法

　　　　4、返回新創建的對象

5、This

　　A、函數中this是當前調用函數的對象

　　B、構造函數中this是指當前構造函數創建的對象

　　Conclusion：誰調用this指向誰

?

轉載于:https://www.cnblogs.com/Adam-Ye/p/11166043.html

總結

以上是生活随笔為你收集整理的javascript基础学习一--面向对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。