likes
comments
collection
share

JavaScript:原型继承原理

作者站长头像
站长
· 阅读数 48

1,什么是继承

  继承(英语:inheritance)是面向对象软件技术当中的一个概念。这种技术使得复用以前的代码非常容易,能够大大缩短开发周期,降低开发费用。

  继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的属性和方法,或子类从父类继承方法,使得子类具有父类相同的行为。

  继承是使用已存在的类的定义作为基础建立新类的技术,新类的定义可以增加新的数据或新的功能,也可以用父类的功能,但不能选择性地继承父类。

  子类的创建可以增加新数据、新功能,可以继承父类全部的功能,但是不能选择性的继承父类的部分功能。继承是类与类之间的关系,不是对象与对象之间的关系。

  例如:先定义一个类叫车,车有以下属性:车体大小、颜色、轮胎、方向盘、品牌、速度、排气量,由车这个类派生出轿车和卡车两个类,为轿车添加一个小后备箱,而为卡车添加一个大货箱。

  继承可以使得子类别具有父类别的各种属性和方法,而不需要再次编写相同的代码。在令子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能。另外,为子类别追加新的属性和方法也是常见的做法。

2,JavaScript中的对象

  大家也是知道的了,继承是相对于面向对象的操作,JavaScript创建对象方式如下:

// 不做太详细的写法了
function User(){}
var onw_obj=new User() //构造函数
var tow_obj={}     // 字面量
var three_obj=new Object() // 构造函数
var fourth_arry=new Arry() // 数组对象
var five_arry = []

3,基本数据类型竟然有方法

  在使用到String,Number等基本数据类型的时候发现基本的数据类型也是可以使用一些方法的,但是在创建的时候并不是使用上述提到的方法创建的

var  name_str='jack Zhang'
var  age_num=89
console.log(name_str.length) //10
console.log(age_num.toString()) // '89'

  那么这些方法是怎么来的?我们知道Boolean、Number和String的值是保存在栈内存中的简单数据段,它们是按值访问的。经测试和学习得出:

在js中有String、Boolean、Number三个包装类,
这三个包装类的作用是为了能够创建这三个基本数据类型对象,以及使用它们的属性和方法。
age_num.toString()
/**
这就是基本包装类型的作用了。本来你是没有方法的,但是你想用方法的时候,
你尽管调,对应的基本包装类型有这个方法就行。例如上面的toString方法,number这个基本类型是不可能有这个方法的,
但是Number这个包装类型有啊,它会吭吭哧哧地把这个方法执行完把结果返回。在执行到:
age_num.toString()这行代码时,发生了很多事。
当处于这种读取模式下的时候,后台就开始干活了。JS高程是这样描述后台完成的这些动作的:
1.创建Number类型的一个实例;  
2.在实例上调用指定的方法;
3.销毁这个实例
**/
age_num.toString()
// 等同于  只要调用方法每次都新创建一个对象
var tmpNumber=new Number(age_num)
tmpNumber.toString()
tmpNumber=null //方法调用后即销毁`

5,对象都是通过函数创建的

首先我们要知道以下的四个知识点:

  • Function类型是JavaScript中的引用类型之一
  • 引用类型都可以当做是一个构造函数
  • 构造函数也是函数的一种
  • 函数其实是一个Function类型的对象
console.log(Function instanceof Function)  //true
console.log(Object instanceof Function)  //true
console.log(Function instanceof Object)  //true
console.log(Array instanceof Function)  //true
console.log(String instanceof Function)  //true
console.log(Number instanceof Function)  //true
console.log(Boolean instanceof Function)  //true

得出结论:Function 是最顶层的构造器。Function 是JavaScript 里最顶层的构造器,它构造了系统中的所有对象,包括定义对象、系统内置对象、甚至包括它自己。Object 是最顶层的对象,所有对象都是继承 Object 的原型。 # JavaScript 世界万物诞生记

JavaScript:原型继承原理

4,原型Prototype和__proto__

  JS中每一个函数都有一个prototype属性,这个属性指向函数的原型对象,每一个由原型对象派生的子对象,都有相同的属性。子对象就叫构造函数,从实例原型中获取相同的属性。

JavaScript:原型继承原理

JavaScript:原型继承原理

每一个子对象(除null外)都会有的__proto__属性,指向该对象构造函数的原型

JavaScript:原型继承原理

JavaScript:原型继承原理

得出结论:实例 P 对象 如果本身不存在属性会去 parent.name ===>parent.proto ==> Parent.prototype ==> Parent.prototype.proto ==> object.prototype ==>object.prototype.proto ==> null

JavaScript:原型继承原理

5,特殊的继承

Function.prototype.__proto === Object.Prototype

Object.proto === Function.prototype

对象的__proto__都指向到 Object 。

Function.mName='1111' 实例 function add(){} add.mName 获取不到,因为属性设置到的Function的静态属性并没有给this添加

Function.prototype.mName='111' 实例 function add(){} add.mName=111 因为原型链查找__proto__获取

add.proto=>Function.prototype=>Function.prototype.proto=Object.prototype

实例 var a=new add() a.mName 获取不到没有原型链指向

Object.prototype.fName='222' 实例 function add(){} add.fName=222 因为原型链查找__proto__获取

a.proto=>add.prototype=>add.prototype.proto=Object.prototype

于是我们就得到了这张图

JavaScript:原型继承原理

参考文献 blog.csdn.net/h979985773/… blog.csdn.net/qq_49002903… muyiy.cn/blog/5/5.1.… mp.weixin.qq.com/s/8h-7pRKYN…

转载自:https://juejin.cn/post/7159481599807979557
评论
请登录