JS原型、原型链、构造函数理解

一、函数对象(Function)和普通对象(Object)

  • function定义或Function实例化的对象为函数对象,包括FunctionObject
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__)

  1. 每个对象都有__proto__属性,可以通过该属性判断对象类型及查找原型属性方法。
function Person(){}
Person.prototype.value = 'ok'
...
var p1 = new Person();
p1.__proto__ === Person.prototype // true
p1.__proto__.value // ok
p1.value // ok
  1. 原型属性方法的继承、隐藏、覆盖
// 接上例
...
// 继承原型属性方法
// 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时)
  1. 原型链终点是Object.prototype.__proto__
Object.prototype.__proto__ === null
  1. 对象属性或方法的查找方式:沿着原型链往上找,直到找到或到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)

  1. 构造函数默认首字母大写
  2. 构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型。
  3. 可以在构造函数中显示调用return。如果返回的值是一个对象,它会代替新创建的对象实例返回。如果返回的值是一个基本类型,它会被忽略,新创建的实例会被返回。
  4. 创建对象的三种模式:构造模式、工厂模式、字面量模式
// 构造模式
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
  1. 公有属性、方法,私有属性、方法,静态属性、方法,原型属性、方法理解
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. 原型属性、方法:子类可以访问,自身内部和外部都可以间接访问
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容