面向对象复习

面向对象复习

普通构造函数

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('i can say')
}
Person.go = function () {
  console.log('走一下');
}

var p1 = new Person('小白',10);
console.log(p1);
p1.say();
Person.go();

class关键词

class Per{
  constructor(name,age){
    this.name  = name;
    this.age = age;
  }
  say(){
    console.log('i can say')
  }
  static go(){
    console.log('要走一走')
  }
}
var p2  = new Per('小黑',15);
console.log(p2);
p2.say();
Per.go();

面向对象继承

实现人类和中国人（重点） 与美国人（辅助了解）

实现人类

function Person(name,age){
  this.name = name;
  this.age = age;
}

Person.prototype.say = function(){
  console.log('i can say ');
}

原型链继承


//原型链继承

function Chinese(skin,language){
  this.skin = skin;
  this.language = language;
}
Chinese.prototype = new Person();
var p1 = new Chinese('黄色','中文')
console.log(p1);
p1.say();

图解

1561535166368.png

问题

Chinese构造函数的原型对象的constructor指向谁。它指向Person，原因是为什么因为new Person()身上没有constructor，它通过__proto__指向Person的原型对象（Person.prototype），这个对象的constructor指向Person。

构造函数的原型对象的constructor指向构造函数自身，按照这个原则我们这个代码或者关系图是有错误的。如何解决？

将new Person()手动添加constructor并且手动指向Chinese。即可修复。

修改后的代码

//原型链继承
function Chinese(skin,language){
  this.skin = skin;
  this.language = language;
}
var person1 = new Person();
person1.constructor = Chinese;
Chinese.prototype = person1;
var p1 = new Chinese('黄色','中文')
console.log(p1);
p1.say();
console.log(Chinese.prototype.constructor)

完成后的图

1561536054179.png

构造函数继承（对象冒充继承）

上面的继承只能继承原型对象的方法。并不能继承父类的属性。如何解决？可以通过关键字call或者applay来实现当前类借用扩充。不属于原型或者原型链的操作方式。帮不需要画图。

// 构造函数继承 对象冒充
function Chinese(skin,language,name,age){
  this.skin = skin;
  this.language = language;
  Person.call(this,name,age);
}
var p1 = new Chinese('黄色','中文','小白',18);
console.log(p1);

组合继承

组合继承其实就是原型链接继承和构造函数继承的结合体

//原型链继承
function Chinese(skin,language,name,age){
  this.skin = skin;
  this.language = language;
  Person.call(this,name,age);// 第一次调用父类
}
var person1 = new Person(); //第二次调用父类
person1.constructor = Chinese;
Chinese.prototype = person1;
var p1 = new Chinese('黄色','中文','小白',18);
console.log(p1);
p1.say();

问题

组合继承的问题在于在子类中调用父类一次。会导致性能浪费。

1561538552036.png

原型式继承（原型继承）

简易版

function Chinese(skin,language,name,age){
  this.skin = skin;
  this.language = language;
}
Chinese.prototype = Person.prototype;
var p1 = new Chinese('黄色','中文')
console.log(p1);
p1.say();


function America(skin,language,name,age){
  this.skin = skin;
  this.language = language;
}
Chinese.prototype = Person.prototype;
var a1 = new Chinese('白色','英语')
console.log(a1);
a1.say();

图解

1561537796501.png

问题

如果把Chinese.prototype.say方法修改会产生什么问题？修改代码尝试。

Chinese.prototype.say = function(){
    console.log('我是中国人')
}

完整代码如下


function Chinese(skin,language,name,age){
  this.skin = skin;
  this.language = language;
}
Chinese.prototype = Person.prototype;
Chinese.prototype.say = function(){
    console.log('我是中国人')
}

var p1 = new Chinese('黄色','中文')
console.log(p1);
p1.say();


function America(skin,language,name,age){
  this.skin = skin;
  this.language = language;
}
Chinese.prototype = Person.prototype;
var a1 = new Chinese('白色','英语')
console.log(a1);
a1.say();

执行结果

Chinese {skin: "黄色", language: "中文"}
我是中国人
Chinese {skin: "白色", language: "英语"}
我是中国人

我们发现一旦对say方法进行修改，那么导致，继承于父类Person的所有子类的原型对象的say方法都发生改变。原因是因为他们用的同一份。如何解决？

改造原型继承

其实想法很简单，又要避开重复实例化父类多次，又要实现不同子类继承同一父类，在原型对象方法修改时不会影响其它子类。

看下图，大家可以简单理解，其实中间圈中的部分不过就是搭了个桥，让子类修改原型时候，不会直接修改父类原型。而是创建一个新的空类，这个空类使用原型式继承父类原型对象。再通过实例化一个对象作为子类Chinese的原型对象。

这样的话子类的实例 p 可以通过__proto__查找到父类 Chinese 的原型对象，同样的也可以通过原型对象的__proto__来查找到Person类的原型对象的公共方法。 这样原型链得到继承。

同时我们修改子类Chinese的原型对象也仅仅是修改了f对象的功能。没有修改 父类Person类的原型对象。

简单理解这个图的意思就就我们将父类和子类中间横插一脚。

1561540794820.png

简化后的图

1561541573091.png

代码实现

function Chinese(skin,language,name,age){
  this.skin = skin;
  this.language = language;
}
// Chinese.prototype = Person.prototype;
// 原型继承改造
//1.创建F构造函数，并且返回实例 new F();
function object(parentPro){
  var F = function () {}
  F.prototype = parentPro;
  return new F();
}
//将返回的实例作为子类的原型对象，同时修改子类原型对象的constructor指向子类。
function inhert(par,child) {
  var mid  = object(par.prototype);
  mid.constructor = child;
  child.prototype = mid;
}
inhert(Person,Chinese);

寄生式组合继承

其实就是原型式继承改造后和构造函数继承的结合版。

// Chinese.prototype = Person.prototype;
// 原型继承改造
//1.创建F构造函数，并且返回实例 new F();
function object(parentPro){
  var F = function () {}
  F.prototype = parentPro;
  return new F();
}
//2.将返回的实例作为子类的原型对象，同时修改子类原型对象的constructor指向子类。
function inhert(par,child) {
  var mid  = object(par.prototype);
  mid.constructor = child;
  child.prototype = mid;
}

function Chinese(skin,language,name,age){
  this.skin = skin;
  this.language = language;
  Person.call(this,name,age)
}
inhert(Person,Chinese);
var p1 = new Chinese('黄皮肤','中文','小白',18)
console.log(p1);
p1.say();
1561545451188.png

class继承

class Person{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  say(){
    console.log(this.name)
  }
}

class Chinese extends Person{
  constructor(name,age,skin,language){
    super(name,age);
    this.skin = skin;
    this.language = language;
  }
}

var p = new Chinese('小黑',18,'白','汉语')
console.log(p);

注意事项

如果子类要继承父类，子类的构造函数中必须书写super() 而且必须写在首行。它其实就相当于构造函数中的对象冒充写法。

1561545964500.png

给父类添加静态方法

父类的静态方法可以给子类继承静态方法。

class Person{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  say(){
    console.log(this.name)
  }
  static go(){
    console.log('i can go')
  }
}

Person.go();//i can go
Chinese.go();//i can go
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,902评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,037评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,978评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,867评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,763评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,104评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,565评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,236评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,379评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,034评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,637评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2赞 341

推荐阅读更多精彩内容

  • 面向对象：创建对象&继承
    博客内容：什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,394评论 3赞 12
  • 2016年5月Swift 2 学习 --- 117个注意事项与要点
    这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档，今天18年5月份再次想写文章，发现简书还为我保存起的...
    Jenaral阅读 2,724评论 2赞 9
  • JS高程笔记 —— 面向对象
    面向对象的语言有一个标志，那就是它们都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScr...
    DHFE阅读 956评论 0赞 4
  • 6 面向对象的程序设计
    本章内容 理解对象属性 理解并创建对象 理解继承 面向对象语言有一个标志，那就是它们都有类的概念，而通过类可以创建...
    闷油瓶小张阅读 836评论 0赞 1
  • 感谢生命中的灵魂伴侣
    老家的百亩桃园正值盛开，看到朋友圈里有人晒出的照片，真心羡慕不已，如果我在老家的话，肯定又会约了姐妹好友，带上孩子...
    Z和风细雨M阅读 777评论 4赞 5