美文网首页
面向对象复习

面向对象复习

作者: yanmingfei | 来源:发表于2019-06-30 23:58 被阅读0次

面向对象复习

普通构造函数

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

相关文章

  • 面向对象复习

    面向对象复习 普通构造函数 class关键词 面向对象继承 实现人类和中国人（重点） 与美国人（辅助了解） 实现人...

  • 第七篇 面向对象编程

    一、复习 二、time模块的补充 三、面向对象 四、初始面向对象和类 五、面向对象之间的交互 六、面向对象的组合 ...

  • 面向对象——封装

    面向对象（复习） 1.面向对象——一种编程思想 2.面向对象的开发步骤 a)OOA:面向对象的需求分析_分析解决问...

  • 面向对象——封装

    面向对象（复习） 1.面向对象——一种编程思想 2.面向对象的开发步骤 a)OOA:面向对象的需求分析_分析解决问...

  • 面向对象继承复习

    js基础的面向对象的继承 构造函数继承 这种方法的缺陷是只会继承构造函数上的实例属性,并不会继承原型对象上的属性,...

  • 面向对象复习笔记

    初始值： 成员变量：自动拥有初始值0 局部变量：不会有初始值，所以要给初始值 特别注意：同一方法不能有同名局部变量...

  • 02Canvas

    【canvas】 《2.6.5 面向对象基础复习补充：》 创建对象的方式： * var o = { name: '...

  • 面向对象的小九九

    面向对象 本人能力有限，有误请斧正 本文旨在复习面向对象(不包含es6) 本文学习思维 创建对象的方式，获取对象属...

  • 2019-08-02

    今天复习了一些编程面向对象的知识

  • JAVA知识泛泛总结

    @(Java) 面向对象编程期末考复习笔记 了解Java Java具有面向对象、与平台（由系统OS和处理器CPU构...

网友评论

      本文标题：面向对象复习

      本文链接：https://www.haomeiwen.com/subject/auntcctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|面向对象复习|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！