原型和继承

原型部分

简单创建一个构造函数与实例:

function Person() {

}
Person.prototype.name = 'Zhar';
Person.prototype.age = 30;
Person.prototype.say = function(){
  console.log(this.name);
}
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Zhar
console.log(person2.name) // Zhar

Person 为构造函数
person是Person 的一个实例对象

1、instanceof

instanceof 用于判断一个对象是否是另一个对象的实例(该方法在原型链中依然有效)

注:instance 为例子,实例的意思

console.log(person1 instanceof Person);//true
console.log(person2 instanceof Person);//true
var arr = new Array();
console.log(arr instanceof Array);//true

2、prototype

每个函数都有一个prototype属性(只有函数才有)
  函数的 prototype属性指向了该构造函数创建的实例的原型(是实例的原型,而不是函数的原型)。

3、constructor

默认情况下,所以原型对象都会自动获得一个constructor(构造器)属性,这个属性指向构造函数。

原型是什么?
每一个对象都有一个与之关联的'原型’对象,每一个对象都会从原型继承属性

如何访问对象的原型?
在ECMA中,并没有规定直接访问对象原型的方法,但 Firefox/Chrome/safari 在每一个对象上都有一个proto属性来访问原型对象。

4、_proto__

console.log(Person.prototype);
console.log(person);
console.log(person.__proto__);

__proto__存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间

  • 小结
  • 构造函数的prototype属性和实例的proto指向构造函数的原型
  • 构造函数原型的constructor(构造器)指向该构造函数
原型.PNG

5、isPrototypeOf

可通过object1.isPrototypeOf(object2)来判断一个对象是否存在于另一个对象的原型链中,即 object1 是否存在于 object2的原型链中。换句话讲:判断 object2是否有一个指针指向 object1。

Person.prototype.isPrototypeOf(person1);//true
Person.prototype.isPrototypeOf(person2);//true

6、getPrototypeOf(ES5)

返回一个对象的原型

一些判断:

person.__proto__ === Person.prototype;//true
person.__proto__.constructor === Person.prototype.constructor;//true
person1.__proto__ === person2.__proto__;//true
person1.say === person2.say;//true
Object.getPrototypeOf(person1) === Object.getPrototypeOf(person2);//true
Object.getPrototypeOf(person1) === Person.prototype;//true

7、hasOwnProperty

通过hasOwnProperty(propertyName)来检测一个属性是存在于实例还是原型中

console.log(person1.hasOwnProperty("name"));//false;
person1.name = "newName";
console.log(person1.hasOwnProperty("name"));//true

8、in

通过in关键字可以判断某个对象是否包含某个属性,而不管这个属性是属于实例还是原型

console.log("name" in person1);//true;
person1.name = "newName";
console.log("name" in person1);//true

通过 hasOwnProperty() 与 in 相结合,可精确定位一个属性是属于原型还是实例

8、keys(obj) ES5

keys(object)方法可返回对象所有可枚举属性的字符串数组

console.log(Object.keys(person1));//[]
person1.name = "newName";
console.log(Object.keys(person1));//["name"]
console.log(Object.keys(Person.prototype));//[ 'name', 'age', 'say' ]

keys()返回的是该对象的属性数组,并不包含其构造函数上的属性

继承部分

1、原型链式继承

让一个函数的原型对象(funtion.prototype)指向另一个原型的指针(实例.__ proto__),而另一个原型中也包含指向另外一个构造函数的指针,依此层层嵌套,形成原型链

function Animal() {
    this.topType = "脊椎动物";
}
Animal.prototype.getTopType = function(){
    return this.topType;
}
function Person() {
    this.secondType = "人类";
}

Person.prototype = new Animal();
Person.prototype.getSecondType = function(){
    return this.secondType;
}
var person = new Person();
console.log(person.topType+"--"+person.secondType);//脊椎动物--人类

在上面的例子中,Person.prototype=new Animal() 即是将 Animal 实例赋给了 Person.prototype

结合前面原型中的讲解,new Animal 产生一个 Animal 实例,该实例对象有一个_proto_指向其构造函数的prototype,将该实例赋值给 Person 的原型,意味着Person的原型 既拥有了 Animal 的所有实例属性或方法,还包含了一个指向 Animal的原型的指针。

缺点

1.引用数据类型问题

在JS面向对象一节中,我们曾经尝试将引用数据类型赋值给原型的属性(参见创建对象一节的原型模式),结果出现实例间相互影响,在原型继承时,也会出现此问题,观察下例:

function Person(){
  this.desc = ["北京"];
}
function Student(){}
Student.prototype = new Person();
var s1 = new Student();
var s2 = new Student();
s1.desc.push("昌平");
console.log(s1.desc);//[ '北京', '昌平' ]
console.log(s2.desc);//[ '北京', '昌平' ]

Person 函数含有一个desc 属性,则 Person的实例会包含各自的一个 desc 属性。但此时的 Student 通过原型链继承了 Person,Student 的 prototype 则变成了 Person 的一个实例,则 Student 就拥有了一个 desc 属性,相当于使用 Student.prototype.desc=[…]为 Student 添加了这样一个原型属性,结果显而易见。

2.传参问题

通过前面的代码,会发现,在使用原型链继承时,无法向父级构造函数传递参数

2、借用构造函数式继承

通过使用 call 或 apply 来实现借用式继承

call 或 apply :更改函数执行的上下文环境

function Person(name){
  this.name = name;
}
function Student(name){
  Person.call(this,name);
}
var student = new Student("zhar");
console.log(student.name);//zhar

上面的代码中,使用了 call,在 Student 的实例环境中调用了 Person 构造函数,更改了 Person 的 this 指向为当前实例环境,最终 Student的实例就拥有了 name 属性

优势

可以在调用构造函数时,向'父级'传递参数,如上例中一样,在调用 Person 时传入了 name 值

劣势

无法继承原型属性或方法

function Person(name){
  this.name = name;
}
Person.prototype.say = function(){
  console.log(this.name);
}
function Student(name){
  Person.call(this,name);
}
var student = new Student("zhar");
console.log(student.name);//zhar
student.say();//报错  student.say is not a function

3、组合继承

将原型链式继承与借用构造函数式继承组合在一起,结合二者的优势。通过原型链实现对原型属性或方法的继承,通过借用构造函数实现对实例属性的继承。

function Person(name){
  this.name = name;
}
Person.prototype.say = function(){
  console.log(this.name);
}
function Student(name){
  Person.call(this,name);
}
Student.prototype = new Person();
var student = new Student("zhar");
console.log(student.name);//zhar
student.say();//zhar
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容