对于js继承,可能是老生常谈的问题,以前我也有写过相关的文章,最近也是因为经常用所以想再一次分享关于这方面的理解,理解不正确的地方欢迎大家指正。
对于一个构造函数来说,首先其名字需要大写(虽然小写也没事,但是一种约定俗成的东西)。其属性有私有属性,原型属性、静态属性。而其方法就有原型方法、静态方法以及特权方法(这个因个人理解不一样可以自己定义)。好了下面我们来看一个例子吧。
function Person(name = "default",age = 18) {
this.name = name;
this.age = age;
var currClassName = "person";//私有属性
this.printClassName = function() {//特权方法 主要是用来访问私有属性
console.log("className:"+currClassName)
}
}
// 原型属性
Person.prototype.className = "person";
// 原型方法
Person.prototype.printName = function() {
console.log("my name is " + this.name)
}
// 静态属性
Person.version=1.1
Person.staticFun = function() {
return 'staticFun'
}
而对于上面的代码,我相信对于有一定js基础的人都能看的懂。私有属性、私有方法,顾名思义,属于自己的属性以及方法,主要是用来访问当前界面的私有属性,可以封装在构造函数中我需要用到的工具函数。原型方法、原型属性,既定义在原型构造对象上的属性跟方法。因每一个构造函数都有它自己的prototype对象属性,而prototype则是一个地址指向原型对象。而这也是我们的构造函数的核心,当我们需要new多个构造函数的实例时,这多个实例是可以共享原型属性以及方法的,避免了申明多个相同的功能函数,而且节省了内存。静态属性以及静态方法,既直接挂载到构造函数上面的属性及方法,我们可以直接通过Person.staticFun()的方式直接访问,不需要从新去new一个实例的模式,适合哪些不通过构造参数影响的方法。
说到原型,我们就不得不说一说继承。继承也就是一个引用类型继承另外一个引用类型的属性跟方法,而每一个构造函数都有自己的原型对象prototype,而每个原型对象又有一个指向其构造函数的指针,而实例又包含了一个指向其构造函数的内部指针。
假如我们目前创建了A、B两个构造函数,假如A.prototype = new B()的实例,即A的原型对象就有了指向另外一个B.prototype对象的指针。同样的,假如B继承了其它的构造函数,B.ptototype原型对象也将会有一个指向其它构造函数原型对象的指针,这个过程是一直成立的,所以对于A、B函数,继承就可以通过A.prototype = new B()的方式实现继承。当然了,这个不友好的地方就是需要new一个实例,开发出另一块内存。
上面说到继承需要开发另外一块内存,既然提及了肯定是有方法解决的,所以,这里就需要借助其其原型对象上的一个对象来解决,他就是proto,而对于这个原型对象上的属性,它特殊在于对于当前构造函数,可以通过它访问到当前构造函数的任何原型属性跟方法。所以,我们就可以对其上面的继承进行改造。即A.prototype.proto = B.prototype,这样,A.prototype.proto对象有了一个指向A.prototype的指针,同时,A.prototype又可以定义自己原型对象上的属性跟方法,而A.prototype.proto对象是可以访问A构造函数上面任意的属性跟方法,这样不就解决了上面从新分配内存的问题。而且也不受先后顺序的干扰。对于静态方法继承,我们直接A.proto=B就好了。即A.proto有了一个直接指向B的指针。
说到这里就不得不提一下关于ES6的语法糖,关于它的继承,ES6为了体现代码的简介以及更面向对象的编程方式,直接以{}的方式将整个构造函数封装(跟后台很像),继承对于它而言就很简单了,直接以关键字的形式,即可实现完美的继承:class A extends B{} 即实现了完美的继承。这里就不多说了,都是同样的原理。有喜欢的可以自己去研究下。
好了,今天js原型就说到这里,欢迎大家指正。原文链接:https://blog.csdn.net/weixin_29364823/article/details/87858328