回到資料型態
• Primitive Type
◦ string
◦ number (NaN Infinity)
◦ boolean
• Composite Type
◦ Object
◦ Array
◦ String
◦ Number
◦ Boolean
• Special Type
◦ null
◦ undefined
typeof() 都是 function
Slide 5
Slide 5 text
函數的三種建構方式
function isthisfunction() {}
var isthisfunction2 = new Function();
var isthisfunction3 = function(){};
console.log(typeof(isthisfunction));
console.log(typeof(isthisfunction2));
console.log(typeof(isthisfunction3));
所有函數都是物件
但物件不一定是函數
Slide 6
Slide 6 text
函數作為建構子
function funca() {}
var obja = new funca();
console.log(typeof(funca));
console.log(typeof obja);
console.log(obja instanceof funca);
function Person(name, age) {
this.name = name;
this.age = age;
}
var p1 = new Person('Justin', 35);
var p2 = new Person('Momor', 32);
console.log(p1 instanceof Person);
typeof funca = function
typeof obja = object
obja instanceof funca = true
判斷物件的class要用
instanceof
而不是 typeof
Slide 7
Slide 7 text
What is this ?
function fn( arg1, arg2,... ){
// do something
}
fn( arg1, arg2,... );
fn.call(context, arg1, arg2,... );
fn.apply(context, [ arg1, arg2,... ]);
this就是apply與call的第一個參
數
都沒有指定時取決呼叫方式
物件呼叫帶物件本身
非物件呼叫帶全域變數
Slide 8
Slide 8 text
呼叫方式對this的差異
var obj = {
fn : function() {console.log(this)}
};
obj.fn();
var tmpfn = obj.fn;
tmpfn();
第一個會印空物件
第二個會印很多東西 取決於執行環境
Slide 9
Slide 9 text
回頭看
function Student(school) {
this.school = school;
}
var stu1 = {school : 'NTU'};
var stu2 = new Student('NCKU');
console.log(typeof stu1);
console.log(typeof stu2);
console.log(stu1 instanceof Student);
console.log(stu2 instanceof Student);
你可以想像成
new Student就是
呼叫Studen且context設成一個空物
件
object
object
false
true
Slide 10
Slide 10 text
原形鍊詳解
function Person(name) {
this.name = name;
}
var p1 = new Person('Steven');
console.log(p1);
console.log(p1.__proto__);
console.log(p1.__proto__ === Person.prototype);
console.log(p1.__proto__.__proto__);
console.log(p1.__proto__.__proto__ === Object.prototype);
Person
p1
Person.prototyp
e
new
Object
new
Object.prototype
{ name: 'Steven' }
{}
true
{}
true
Slide 11
Slide 11 text
原型練應用於物件方法
function Person(name) {
this.name = name;
}
Person.prototype.like = function(another) {
if(!(another instanceof Person)) throw new Error('Not Person');
if(another == this) throw new Error('can not like myself');
this.likewith = another;
another.likewith = this;
};
var p1 = new Person('Steven');
var p2 = new Person('Jobs');
p1.like(p2);
console.log(p1);
console.log(p2);
{ name: 'Steven',
likewith: { name: 'Jobs', likewith: [Circular] } }
{ name: 'Jobs',
likewith: { name: 'Steven', likewith: [Circular] } }
Slide 12
Slide 12 text
原型練應用於繼承
function Person(name) {
this.name = name;
}
Person.prototype.like = function(another) {
if(!(another instanceof Person)) throw new Error('Not Person');
if(another == this) throw new Error('can not like myself');
this.likewith = another;
another.likewith = this;
};
function Superman(name, superpower) {
this.superpower = superpower;
Person.call(this, name);
}
Superman.prototype.__proto__ = Person.prototype;
Superman.prototype.usesuperpower = function() {
console.log(this.name + ' use "' + this.superpower + '"');
}
var hulk = new Superman('HULK001', 'green and big');
hulk.usesuperpower();
HULK001 use "green and
big"
Slide 13
Slide 13 text
原型練應用於繼承
Person
Person.prototyp
e
Object.prototype
Suprman
Suprman.prototy
pe
hulk
new
call
Slide 14
Slide 14 text
助教我炸裂了!
撐下去 hasOwnProperty isPrototypeOf
var hulk = new Superman('HULK001', 'green and big');
console.log(hulk.hasOwnProperty('name'));
console.log(hulk.hasOwnProperty('usesuperpower'));
console.log(hulk instanceof Superman);
console.log(Person.prototype.isPrototypeOf(hulk));
true
false
true
true
不是自己的特性
hasOwnProperty會回傳
false
Slide 15
Slide 15 text
還有更讓你炸裂的特性
function Person(name) {
if(name) this.name = name;
}
Person.prototype.name = 'ONE MAN';
var p1 = new Person();
console.log(p1.name);
p1.name = 'Mike';
console.log(p1.name);
var p2 = new Person();
console.log(p2.name);
讀取會follow原型練
寫入不會
ONE MAN
Mike
ONE MAN