__proto__
: 是借助已有的对象创建新的对象,将子类的原型指向父类,就相当于加入了父类这条原型链。
prototype
:返回对象类型原型的引用,即原型对象。
两者区别:
prototype是作为构造函数去访问原型,而__proto__是作为实例去访问原型。实例的__proto__等于其构造函数的prototype。在person1和person2实例对象下面有一个[[prototype]],其实没有标准的方式可以访问它,但是主流浏览器上在每个对象上(null除外)都支持一个属性,那就是proto,这个属性会指向该对象的原型。原型对象所以特殊,是因为它拥有一个普通对象没有的能力:将它的属性共享给其他对象。
一、函数对象(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
访问权限总结
- 私有属性、方法:仅自身内部可以访问。
- 公有属性、方法:仅子类可以访问
- 静态属性、方法:自身外部可以访问,自身内部和子类可以间接访问
- 原型属性、方法:子类可以访问,自身内部和外部都可以间接访问
参考链接: https://www.jianshu.com/p/bfe4cc66b10a