本章任務

創建person對象

創建Person構造函數

創建Person對象并畫原型鏈圖

創建繼承Person的Student子類

?

本章目標

了解什么是對象和面向對象

會創建對象

理解什么是構造函數和對象原型

理解什么是原型鏈并且使用對象繼承，會畫原型鏈圖

?

回顧JavaScript數據類型

JavaScript中的基本數據類型

• • • number(數值類型)
    • string(字符串類型)
    • boolean(布爾類型)
    • null(空類型)
    • undefined(未定義類型)
    • object

?

對象是什么?

對象是包含相關屬性和方法的集合體

• 屬性
• 方法

什么是面向對象

• 面向對象僅僅是一個概念或者編程思想
• 通過一種叫做原型的方式來實現面向對象編程

創建對象

自定義對象

內置對象

?

自定義對象2-1

基于Object對象的方式創建對象

語法：

var 對象名稱=new Object( );

示例：----------通過 ?. 添加屬性和方法

var flower=new Object();flower.name="長春花";flower.genera="夾竹桃科 長春花屬";flower.area="非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地";flower.uses="觀賞或用藥等";flower.showName=function(){ ???alert(this.name); ???}flower.showName();

?

自定義對象2-2

使用字面量賦值方式創建對象

示例：

var flower={name:"長春花",genera:"夾竹桃科 長春花屬",area:"非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地",uses:"觀賞或用藥等",showName:function(){ alert(this.name); }}flower.showName();

?

內置對象2-1

常見的內置對象：

String（字符串）對象

Date（日期）對象

Array（數組）對象

Boolean（邏輯）對象

Math（算數）對象

RegExp對象

學員操作—創建person對象2-2

練習：

實現思路

使用new創建對象person

????var person=new Object();

使用“.”添加屬性

???person.name="朗曉明";

????person.age="38";

使用+把各屬性的值拼接起來，使用innerHTML為頁面元素賦值

???var str="姓名："+this.name+"<br/>年齡："+this.age+"……;

簡寫：var str=this.name+this.age+……;

???document.getElementById("intro").innerHTML=str;

?

構造函數和原型對象

如何解決使用同一個接口不需要創建很多對象，減少產生大量的重復代碼？

構造函數

原型對象

?

構造函數

創建構造函數

示例：

function Flower(name,genera,area,uses){this.name=name;…….this.showName=function(){alert(this.name);}}

????var flower1=new Flower("長春花","夾竹桃科 長春花屬","非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地","觀賞或用藥等")

???flower1.showName();

?

使用構造函數創建對象

示例：

var flower2=new Flower("牡丹","芍藥科 芍藥屬","中國","觀賞、食用或藥用");

flower2.showName();

var flower3=new Flower("曼陀羅花","茄科 曼陀羅屬","印度、中國北部","觀賞或藥用");

flower3.showName();

使用構造函數創建新實例

調用構函數的4個步驟：

創建一個新對象

將構造函數的作用域賦給新對象（this就指向了這個新對象）

執行構造函數中的代碼

返回新對象

?

constructor屬性

constructor屬性指向Flower

示例：

alert (flower1.constructor==Flower);alert (flower2.constructor==Flower);alert (flower3.constructor==Flower);

instanceof操作符

使用instanceof操作符檢測對象類型

alert(flower1 instanceof Object);alert(flower1 instanceof Flower);alert(flower2 instanceof Object);alert(flower2 instanceof Flower);alert(flower3 instanceof Object);alert(flower3 instanceof Flower);

?

原型對象2-1

示例：

function Flower(){}Flower.prototype.name="曼陀羅花";Flower.prototype.genera="茄科 曼陀羅屬";Flower.prototype.area="印度、中國北部";Flower.prototype.uses="觀賞或藥用";Flower.prototype.showName=function() {alert(this.name);}var flower1=new Flower();flower1.showName();var flower2=new Flower();flower2.showName();alert(flower1.showName==flower2.showName);

?

原型對象2-2

示例：

function Flower(){}Flower.prototype.name="曼陀羅花";Flower.prototype.genera="茄科 曼陀羅屬";Flower.prototype.area="印度、中國北部";Flower.prototype.uses="觀賞或藥用";Flower.prototype.showName=function() {alert(this.name);}var flower1=new Flower();var flower2=new Flower();flower1.name="長春花";alert(flower1.name);alert(flower2.name);

?

繼承

原型鏈

對象繼承

?

原型鏈4-1

一個原型對象是另一個原型對象的實例

相關的原型對象層層遞進，就構成了實例與原型的鏈條，就是原型鏈

原型鏈4-2

示例：

function Humans(){this.foot=2;}Humans.prototype.getFoot=function(){return this.foot;}function Man(){this.head=1;}Man.prototype=new Humans(); ?????????//繼承了HumansMan.prototype.getHead=function(){return this.head;}var man1=new Man();alert(man1.getFoot()); ?????????????????????????//2alert(man1 instanceof Object); ?????????//true ????alert(man1 instanceof Humans); ???????//truealert(man1 instanceof Man); ?????????//true

?

原型鏈4-3

構造函數和原型之間的關系

?

原型鏈4-4

調用man1.getFoot( ) 經歷的三個步驟：

搜索實例

搜索Man.prototype

搜索Humans.prototype

?

完整的原型鏈

Object在原型鏈中的位置

對象繼承

man1.clothing和man2.clothing輸入的信息一樣，為什么？

創建子類型的實例時，不能向父類型的構造函數中傳遞參數

示例：

?function Humans(){this.clothing=["trousers","dress","jacket"];}function Man(){ ????}//繼承了HumansMan.prototype=new Humans();var man1=new Man();man1.clothing.push("coat");alert(man1.clothing);var man2=new Man();alert(man2.clothing);

?

借用構造函數2-1

語法：

apply([thisOjb[,argArray]])

應用某一對象的一個方法，用另一個對象替換當前對象

語法：

call([thisObj[,arg1[,arg2[, ?[,argN]]]]])

調用一個對象的一個方法，以另一個對象替換當前對象

?

借用構造函數2-2

示例：??

function Humans(name){this.name=name;}function Man(){Humans.call(this,"mary"); ??//繼承了Humans,同時還傳遞了參數this.age=38; ?????????????//實例屬性}var man1=new Man();alert(man1.name); ??????//輸出maryalert(man1.age); ???????//輸出38

?

組合繼承

組合繼承：有時也叫做偽經典繼承

• • • 將原型鏈和借用構造函數的技術組合到一塊，發揮二者之長的一種繼承模式
    • 使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承

?

總結

?

總結

以上是生活随笔為你收集整理的4.JavaScript对象和初始面向对象的全部內容，希望文章能夠幫你解決所遇到的問題。

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