物件和物件

物件簡介

物件

也就是之前講過的Object

在JS中幾乎所有東西都是Object

了解了Object你就了解了JavaScript

不是物件

Boolean

Number

String

但是也可以用物件來建立

原始型別

primitive data

裏面只存放了單一的值

不是物件的就是原始型別

踹踹看

new Boolean(true)==true
new Boolean(true)===true
typeof new Boolean(true)
typeof true

各位注意

能用原始型別就不要用物件

為了執行速度也為了少打字(?)

避免判斷時結果有些差異

接下來

知道物件是啥之後來看看如何使用

先來學習浪費記憶體產生新物件

建立物件

創造物件

直接建立字面常數

使用new關鍵字

定義建構子後產生物件

Object.create()

字面常數

用大括號包起用逗號分開的鍵值配對

就長得和JSON一樣

最常看到的建立方法

踹踹看

var cat={
  ear:"貓耳",
  tongue:"貓舌",
  mewmewmew:function(){
    alert("9999999 DAMAGE!!")
  }
}

屬性

物件的鍵值配對

排列順序是無序的!!

千萬不要心存僥倖...

方法

專屬於該物件的動作

也包含在物件的屬性中

可以被呼叫

使用關鍵字

剛才看到的new關鍵字

特定場合會用到

此外不要把new用在變數或函式名稱

定義建構子後產生物件

！！！

等等再說比較好...

神奇的函式呼叫

JavaScript1.9支援了Object.create()

比new更厲害一些

可以指定新屬性的存取限制

舊的瀏覽器又不能用了

屬性的存取限制

所有屬性皆可讀取

可設定是否可迭代,可設定,可寫入

這個就暫且先不管他啦~~

建構子

可以傳入參數並且建立物件的函式

使用this關鍵字設定物件的屬性

對於建立自訂物件很重要

搭配new關鍵字建立物件

踹踹看

function Cat(name,age,color){
  this.name=name
  this.age=age
  this.color=color
  this.toString=function(){
    return name+" is a "+age+" old "+color+" cat"
  }
}
					

this關鍵字

代表是誰擁有此段程式碼

在函式中被使用則代表該擁有該函式的物件

在物件中被使用代表該物件

在建構子中代表了新的物件

這個this也是JS神奇的部份...

小實驗

不同時候的this會是不同東西...

function Foo(){
  this.a=100
  console.log(this)
}

我們得到了新的全域變數了 可喜可賀

接下來

雖然說是物件導向但是和Java不一樣

複製人 vs 鯛魚燒

物件導向

物件導向

今天只講JS的原型程式設計

和常見的類別導向不太一樣

原型程式設計

屬性和方法皆由原型複製而來

獨立個體的行為可以被修改

偏好動態的行為改變

原型

所有物件的屬性和方法都是繼承自Object.prototype

從哪new出來就從哪裡繼承屬性和方法

複製人大軍

Prototype

可以對建構子設定prototype的屬性

影響所有該建構子建出來的物件

踹踹看

function Foo(){this.a=100}
var a=new Foo()
Foo.prototype.b=200
var b=new Foo()

之前的物件也被會影響

原型繼承

有父類別和子類別(!)

先定義子類別建構子

將父類別prototype複製給子類別

將子類別建構子重新導向

踹踹看

function SilverCat(n,a){Cat.call(this,n,a,"silver")}
SilverCat.prototype = Object.create(Cat.prototype);
SilverCat.prototype.constructor = SilverCat;
					

注意要如何呼叫原先的建構子

至於其他函式呼叫父函式

要用prototype定義才可繼承

用this的話只有自己能看

有沒有JS惡劣部份的八卦?

網路上的範例

function Base() {}
Base.prototype.foo = function() {
  console.log('called foo in Base');
}
function Sub() {}
Sub.prototype = new Base();
Sub.prototype.foo = function() {
  Base.prototype.foo.call(this);
  console.log('called foo in Sub');
}
var base = new Base();
base.foo();
var sub = new Sub();
sub.foo();

接下來

JS實在太難搞了很頭痛

所以課程就到這裡...