cometang前端技术博客 cometang前端技术博客
首页
  • html5
  • JavaScript
  • ES6
  • Vue
  • 微信小程序
  • react
  • react上手教程
  • 前端框架
  • 大神之路
  • 面试汇总
  • Node
  • PHP
  • Go语言
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

cometang

永远相信技术的力量
首页
  • html5
  • JavaScript
  • ES6
  • Vue
  • 微信小程序
  • react
  • react上手教程
  • 前端框架
  • 大神之路
  • 面试汇总
  • Node
  • PHP
  • Go语言
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • ES6

    • let与const
    • 解构赋值
    • 字符串模板
    • 箭头函数
    • 展开运算符
    • 数组的方法
    • 对象的方法
    • 类的继承
      • ES6 类的继承
      • ES5 概念定义
      • 实例可以获取自己的构造函数
      • 两个类的继承
  • vue

  • h5

  • JavaScript

  • 前端框架

  • react

  • 大神之路

  • 微信小程序

  • 面试题汇总

  • react轻松上手教程

  • 前端
  • ES6
cometang
2021-01-22
目录

类的继承

  • ES5 没有类的概念 通过构造函数来实现 constructor() 命名规则:首字母大写

# ES6 类的继承

  • ES6 通过 class 实现,类的三种属性
  • 类的公有属性:可以通过 proto 直接找到公有属性
  • 类的私有属性
  • 类的静态属性:静态方法

# ES5 概念定义

  • 原型链存在于任何地方(类 函数 方法 对象 变量等等)
  • 原型链空间中的 constructor 属性 指向的是 所属者

图1

function Parent() {
  // 构造函数中的 this指向 主要根据调用的方式来决定
  // 通过 new 方式来调用 this指向的就是实例
  // 通过函数的方式引用  this指向的就是 window
  this.name = "parent"; //私有属性
}
// 通过原型链定义公有属性
Parent.prototype.eat = function() {
  console.log("eat");
};
console.log(Parent.prototype.constructor === Parent); // true
1
2
3
4
5
6
7
8
9
10
11

图2

  • 获取构造函数私有属性
function Parent() {
  this.name = "parent"; //私有属性
}
let parent = new Parent();
console.log(parent.name);
1
2
3
4
5
  • 获取构造函数的公有属性

可通过proto 获取,也可以直接获取(先查找私有属性没有继续向上找公有属性查找)

function Parent() {
  this.name = "parent"; //私有属性
}
// 公有属性 (可通过__proto__ 获取,也可以直接获取,直接获取是自动向上查找出来)
Parent.prototype.eat = function() {
  console.log("eat");
};
let parent = new Parent();
console.log(parent.__proto__.eat()); // eat
console.log(parent.eat()); // eat
1
2
3
4
5
6
7
8
9
10

# 实例可以获取自己的构造函数

  • 实例可以通过 constructor 获取到自己的构造函数
  • 实例 不可以通过 constructor 指向去拿构造函数内定义的属性值
  • 构造函数 不可以拿到自己的定义的属性值
function Parent() {
  this.name = "parent";
}
Parent.prototype.eat = function() {
  console.log("eat");
};
let parent = new Parent();
console.log(parent.__proto__.constructor);
// [Function: Parent]
1
2
3
4
5
6
7
8
9
function Parent() {
  this.data = 1;
}
Parent.prototype.eat = function() {
  console.log("eat");
};
let parent = new Parent();
console.log(parent.__proto__.constructor.data);  // undefined
console.log(Parent.data);  // undefined
1
2
3
4
5
6
7
8
9

# 两个类的继承

图2

  • 继承私有属性
  • 在儿子类中调用父类 父类名称.call(this);实现继承
function Parent (){
    this.data = 1;
};
function Child(){
    this.data1 = 2;
    Parent.call(this);   //继承Parent类的私有属性
};
let childs = new Child()
console.log(childs.data)
// 1
1
2
3
4
5
6
7
8
9
10
  • 继承公有属性
  • 方法一(ES5写法):在实例化子类之前 调用一次 子类名.prototype.__proto__ = 父类名.prototype;
  • 方法二(ES6写法):Object.setPrototypeOf(Child.prototype,Parent.prototype);
  • 方法三(ES6写法):
function Parent (){
    this.data = 1;
};
Parent.prototype.eat = function(){
    console.log('吃饭')
}
function Child(){
    this.data1 = 2;
    Parent.call(this); //继承父类私有属性
};
Child.prototype.eat1 = function(){
    console.log('吃饭1')
}
// 继承父类公有属性 -- ES5写法
// Child.prototype.__proto__ = Parent.prototype;
// 继承父类公有属性 -- ES6
Object.setPrototypeOf(Child.prototype,Parent.prototype);

let childs = new Child();
console.log(childs.data);     //1
console.log(childs.eat());    //吃饭
console.log(childs.data1);    //2
console.log(childs.eat1());   // 吃饭1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
编辑 (opens new window)
上次更新: 2022/05/28, 19:34:46
对象的方法
vue基础详解

← 对象的方法 vue基础详解→

最近更新
01
go语言基础
07-13
02
《react上手教程》- 基础语法
07-13
03
redux-redux toolkit-状态管理
03-18
更多文章>
Theme by Vdoing | Copyright © 2019-2023

cometang | 唐世杰 渝ICP备18015657号-2

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式