美文网首页
js面向对象总结

js面向对象总结

作者: renxiaoyao09 | 来源:发表于2022-03-03 22:55 被阅读0次

1、类与实例

类的声明 实例化

// 构造函数
function Person(){}
// es6
class Person{
  constructor(){}
}
// 实例化
let person = new Person();

2、类与继承

继承的几种方式

// 1、通过构造函数继承
// 缺点:不能继承父类的原型
let Parent1 = function () {};
let Child1 = function () {
  Parent1.call(this);
};
let c1 = new Child1();

// 2、通过原型链继承
// 缺点:两个实例干扰(修改一个,另一个也会变,因为它们的原型对象共用了一个堆内存)
let Parent2 = function () {};
let Child2 = function () {};
Child2.prototype = new Parent2();
let c21 = new Child2();
let c22 = new Child2();

// 3、组合继承1
// 缺点:Parent3会执行两次消耗过多内存,并且实例的原型对象指向父级类(c3.__proto__.constructor === Parent3)
let Parent3 = function () {};
let Child3 = function () {
  Parent3.call(this);
};
Child3.prototype = new Parent3();
let c3 = new Child3();

// 4、组合继承优化1 修改子类原型对象为父类的原型对象
// 缺点:实例的原型对象指向父级类(c4.__proto__.constructor === Parent3),共用父类原型的堆内存
let Parent4 = function () {};
let Child4 = function () {
  Parent4.call(this);
};
Child4.prototype = Parent4.prototype;
let c4 = new Child4();

// 5、组合继承优化2 单独复制一个父类原型堆内存,并强行替换子类原型,并指定这个堆内存构造器指向子类实现完美继承
let Parent5 = function () {};
let Child5 = function () {
  Parent5.call(this);
};
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;
let c5 = new Child5();
console.log(c5.__proto__.constructor === Child5); // true

// 6、es6实现继承
class Parent6 {}
class Child6 extends Parent6 {
  constructor() {
    // 类似于call的继承:在这里super相当于把Parent6的constructor给执行了,
    // 并且让方法中的this指向B的实例,super当中传递的实参都是在给A的constructor传递。
    // 而且 super 除了在 constructor 里直接调用外
    // 还可以使用 super.xxx(…) 来调用父类上的某个原型方法,这同样是一种限定语法。
    super();
  }
}
let c6 = new Child6();
console.log(c5.__proto__.constructor === Child5); // true

相关文章

  • JS面向对象精要(二)_函数

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(三)_理解对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(四)_构造函数和原型对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(五)_继承

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • js面向对象总结

    1、类与实例 类的声明 实例化 2、类与继承 继承的几种方式

  • 面向对象五

    面向对象高级二 总结 PHP 里的面向对象、继承方式 JS 里的继承方式 call(构造函数伪装) 和 proto...

  • JS面向对象

    JS原型与面向对象总结 https://www.cnblogs.com/wennice/p/6374492.html

  • js 面向对象和面向过程

    js 面向对象和面向过程

  • 面向对象OOP--JS

    作者:烨竹 JS面向对象简介 JS名言:万物皆对象 JS面向对象比PHP简单很多;因为JS中没有class关键字,...

  • JavaScript笔记(一)

    一、面向对象面向过程的区别 1、什么是js对象 js对象:属性和方法的集合,js所有数据都可以看成对象...

网友评论

      本文标题:js面向对象总结

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