IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript面向对象(三) -> 正文阅读

[JavaScript知识库]JavaScript面向对象(三)

面向对象的三大特性:封装继承多态

本文主要内容:利用JavaScript原型链实现继承

JavaScript原型链

每一个对象都有原型,指向另一个对象,另一个对象也有自己的原型,就这样由原型的原型构成的链条就叫原型链。

image-20210924092335152

原型链的尽头

如果一个原型链是,没用尽头的,那么在查找一原型链上不存在的属性时,就会一直查找下去,存在死循环了。显然不是这样的,那么原型链的尽头是什么?

Object的原型

顶层原型

看代码~

// obj字面量创建方法类似于 new Object()
// 那么 obj对象就是Object的一个实例,也就是说obj.__proto__ === Object.prototype
var obj = {
  name: "fzb",
};
// 那么obj.__proto__ 或者 Oject.prototype 的__proto__ 是什么? 答案是: null
console.log(obj.__proto__); // [Object: null prototype] {}
console.log(obj.__proto__.__proto__); // null

[Object: null prototype] {}的特殊之处:

1、该对象存在原型属性,只是原型指向了null,就是已经是顶层原型了。

2、该对象上还存在许多其他的方法,只是不可枚举,看不到。

创建Object对象的内存图

image-20210924094822274

上方例子的内存图

image-20210924095218150

Object是所有类的父类

原型链最顶层的原型对象就是Object的原型对象

例子:

function Student(sno, name) {
  this.sno = sno;
  this.name = name;
}
const stu = new Student(201801, "fzb");

console.log(stu); // Student { sno: 201801, name: 'fzb' }
console.log(stu.__proto__); // {}
console.log(stu.__proto__.__proto__); // [Object: null prototype] {}

console.log(Student.__proto__); // {}
/* ***************后面将具体讲解注释内容***************
 * 为什么不是 Student.__proto__ = [Object: null prototype] {}
 * 是因为 Student.__proto__ = Function.prototype 
 * Function.prototype.__proto__ = Object.prototype = [Object: null prototype] {}
 * ***************后面将具体讲解注释内容***************
 */
console.log(Student.__proto__.__proto__); // [Object: null prototype] {}

内存图:

image-20210924101359674

原型链实现继承

继承可以重复利用代码,子类可以使用

例子:

function Person() {
  this.name = "fzb";
}

Person.prototype.running = function () {
  console.log(this.name + "正在跑步~");
};

function Student(sno) {
  this.sno = sno;
}
Student.prototype = new Person();
// 重写整个原型对象之后,要重新配置 constructor
Object.defineProperty(Student.prototype, "constructor", {
  configurable: true,
  enumerable: false,
  writable: true,
  value: Student,
});
Student.prototype.studying = function () {
  console.log(this.name + "正在学习");
};

const stu = new Student(201801);
stu.running(); // fzb正在跑步~
stu.studying(); // fzb正在学习

内存图:

image-20210924105330732

缺陷

1> 在打印子类对象时,有些属性本应该打印出来的,但是因为在父类上,无法打印出来。

2> 多个子类对象在进行某些操作时,会出现相互影响。

// 在上方例子上,加一点点代码,
function Person() {
  this.name = "fzb";
  this.friends = []; // 增加一个属性
}
const stu1 = new Student(201801);
stu1.friends.push("zzw");
const stu2 = new Student(201801);
console.log(stu2.friends); // [ 'zzw' ]
// stu2上取到了stu1的friends属性,这是不可以的

3> 无法传递参数,有些属性存在父类构造函数内,子类实例化时,初始化参数无法传入到父类。

借用构造函数实现继承

在子类构造函数内,调用构造函数。使改变父类构造函数内的this指向,然后父类在this上添加的属性就会在子类实例化的对象上。

function Person(name) {
  this.name = name;
  this.friends = [];
}

Person.prototype.running = function () {
  console.log(this.name + "正在跑步~");
};

function Student(sno, name) {
  Person.call(this, name); // 添加代码
  this.sno = sno;
}
Student.prototype = new Person();
// 重写整个原型对象之后,要重新配置 constructor
Object.defineProperty(Student.prototype, "constructor", {
  configurable: true,
  enumerable: false,
  writable: true,
  value: Student,
});
Student.prototype.studying = function () {
  console.log(this.name + "正在学习");
};

const stu1 = new Student(201801,"stu1");
stu1.friends.push("zzw");
const stu2 = new Student(201802,"stu2");
console.log(stu2.friends); // []

这时原型链实现继承的三个弊端,就解决的。但是又出现了新的缺陷。

缺陷

1> 父类构造函数至少执行了两次以上

2> 子类构造函数的原型对象是父类的实例对象,那么个对象上的属性将会是undefined

image-20210924111324798

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-29 10:10:41  更:2021-09-29 10:10:52 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:00:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码