一、函数对象(Function)和普通对象(Object)
- 由
function
定义或Function
实例化的对象为函数对象,包括Function
和Object
function Person1 (name) {
this.name = name;
}
var Person2 = function(name) {
this.name = name;
};
var Person3 = new Function('name', 'this.name = name');
...
typeof Person1 // function
typeof Person2 // function
typeof Person3 // function
typeof Object // function
typeof Function // function
...
// 所有的函数对象都是`Function`的实例对象
Person1 instanceof Function // true
Object instanceof Function // true
Function instanceof Function // true
Person1.__proto__ === Function.prototype // true
Object.__proto__ === Function.prototype // true
Function.__proto__ === Function.prototype // true
-
普通对象则是由函数对象
(除Function外)
实例化(new)
的对象或字面量{}
创建的对象
// 实例化模式
var p1 = new Person1('Franchen');
var p2 = new Person2('Franchen');
var p3 = new Person3('Franchen');
var obj1 = new Object();
// 字面量模式
var obj2 = { name: 'Franchen' };
...
typeof p1 // object
typeof p2 // object
typeof p3 // object
typeof obj1 // object
typeof obj2 // object
...
// 注意:由Function实例化的对象是函数对象
var fun = new Function();
typeof fun // function
- 函数对象和普通对象的差别:函数对象含有原型对象属性
prototype
和原型链属性__proto__
,而普通对象只有__proto__
属性
- 每个函数对象都有个
prototype
属性,这个属性指向函数的原型对象,原型对象(除Object.prototype外)
是普通对象(Object)的实例
Object.prototype // Object原型对象
Function.prototype // Function原型对象
Person.prototype // Person原型对象
...
typeof Object.prototype // object
typeof Function.prototype // object
typeof Person.prototype // object
...
// 原型对象类型
Person.prototype instanceof Object // true
Function.prototype instanceof Object // true
Person.prototype.__proto__ === Object.prototype // true
Function.prototype.__proto__ === Object.prototype // true
// Object的原型对象类型为null
Object.prototype.__proto__ === null // true
二、原型链(__proto__)
- 每个对象都有
__proto__
属性,可以通过该属性判断对象类型及查找原型属性方法。
function Person(){}
Person.prototype.value = 'ok'
...
var p1 = new Person();
p1.__proto__ === Person.prototype // true
p1.__proto__.value // ok
p1.value // ok
- 原型属性方法的继承、隐藏、覆盖
// 接上例
...
// 继承原型属性方法
// p1的value属性继承Person的原型对象的value属性
p1.value // ok
...
// 隐藏原型属性方法
// 当实例对象的自身的属性、方法名字
// 和原型的属性、方法名字一致时,
// 原型的属性、方法被隐藏(原理见对象属性方法的查找方式)
// 可通过访问原型链访问被隐藏的原型属性方法
p1.value = 'p1'
p1.value // p1
p1.__proto__.value // ok
...
// 覆盖原型属性方法
// 注意:通过覆盖原型属性和方法会影响父类原型对象、
// 所有已实例化的子类,以及未来实例化的子类
var p2 = new Person();
p2.__proto__.value = 'p2'
p2.value // p2(p2无自身属性value时)
p2.__proto__.value // p2
p1.value // p2(p1无自身属性value时)
p1.__proto__.value // p2
Person.prototype.value // p2
var p3 = new Person();
p3.value // p2(p3无自身属性value时)
- 原型链终点是
Object.prototype.__proto__
Object.prototype.__proto__ === null
- 对象属性或方法的查找方式:沿着原型链往上找,直到找到或到
Object.prototype.__proto__
停止
var O = {},
var F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
...
// 自身 --> O.__proto__(Object.prototype) --> 找到
console.log(O.a) // value a
// 自身 --> O.__proto__(Object.prototype) --> O.__proto__.__proto__(null) --> 未找到
console.log(O.b) // undefined
// 自身 --> F.__proto__(Function.prototype) --> F.__proto__.__proto__(Object.prototype) --> 找到
console.log(F.a) // value a
// 自身 --> F.__proto__(Function.prototype) --> 找到
console.log(F.b) // value b
三、构造函数(constructor)
- 构造函数默认首字母大写
- 构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型。
- 可以在构造函数中显示调用return。如果返回的值是一个对象,它会代替新创建的对象实例返回。如果返回的值是一个基本类型,它会被忽略,新创建的实例会被返回。
- 创建对象的三种模式:构造模式、工厂模式、字面量模式
// 构造模式
function Person1(name) {
this.name = name;
}
// 工厂模式:return对象
function Person2(name) {
var obj = new Object();
obj.name = name;
return obj;
}
// 字面量模式
function Person3(name) {
return {
name: name
};
}
// 忽略return基本类型,返回对象
function Person4(name) {
this.name = name;
return name;
}
...
var p1 = new Person1('Franchen'); // Person {name: 'Franchen'}
var p2 = new Person2('Franchen'); // Object {name: 'Franchen'}
var p3 = new Person3('Franchen'); // Object {name: 'Franchen'}
var p4 = new Person4('Franchen'); // Person {name: 'Franchen'}
...
// 原型对象的构造函数是Function
Person1.constructor === Function // true
// 原型对象的原型的构造函数是其自身
Person1.prototype.constructor === Person1 // true
- 公有属性、方法,私有属性、方法,静态属性、方法,原型属性、方法理解
function Person(name) {
// 私有属性
var six = 'male';
// 私有方法
function say(word) { console.log(word); }
// 公有属性
this.nickname = name;
// 公有方法
this.aboutMe = function(){
say('Nickname: ' + this.nickname + ', Six: ' + six);
};
}
// 静态属性
Person.age = 20;
// 静态方法
Person.getAge = function(){ return this.age; }
// 原型属性
Person.prototype.canWalk = true;
// 原型方法
Person.prototype.walk = function(){ return this.canWalk; }
...
// 原型对象可访问权限
Person.six // undefined
Person.say() // Uncaught TypeError: Person.say is not a function
Person.nickname // undefined
Person.aboutMe() // Uncaught TypeError: Person.aboutMe is not a function
Person.age // 20
Person.getAge() // 20
Person.canWalk // undefined
Person.walk() // Uncaught TypeError: Person.walk is not a function
...
// 普通对象可访问权限
var p1 = new Person('Franchen');
p1.six // undefined
p1.say() // Uncaught TypeError: Person.say is not a function
p1.nickname // Franchen
p1.aboutMe() // Nickname: Franchen, Six: male
p1.age // undefined
p1.getAge() // Uncaught TypeError: p1.getAge is not a function
p1.canWalk // true
p1.walk() // true
...
// 静态属性及方法的访问
p1.constructor.age // 20
p1.constructor.getAge() // 20
// 原型链访问原型属性和方法
p1.__proto__.canWalk // true
p1.__proto__.walk() // true
...
// 访问权限总结
1. 私有属性、方法:仅自身内部可以访问。
2. 公有属性、方法:仅子类可以访问
3. 静态属性、方法:自身外部可以访问,自身内部和子类可以间接访问
4. 原型属性、方法:子类可以访问,自身内部和外部都可以间接访问