js - 原型继承和应用

Posted 2021-01-02 甘劭

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js - 原型继承和应用相关的知识，希望对你有一定的参考价值。

前言：本文大体摘自：https://blog.csdn.net/sysuzhyupeng/article/details/54645430 这位CSDN博主写的十分的好，逻辑性很强。后面 “如何安全的扩展一个内置对象 ” 是我添加的。顺便把这位博主的详解js中extend函数和 call和apply上手分析摘抄下来。

原型继承：利用原型中的成员可以被和其相关的对象共享这一特性，可以实现继承，这种实现继承的方式，就叫做原型继承.

原型继承是js的一种继承方式，原型继承是什么意思呢，其实就是说构造函数和子构造函数，或者说类和子类之间(当然js中不存在类)，唯一的继承传递方式是通过原型，而不是其他语言直接通过extends(当然ES6的语法糖出现了extends)。所以你需要手写prototype。(封装手写prototype的方法请看我的另一篇文章详解js中extend函数) 我们先看一个简单的例子

具体看例子：

1 function Parent(){
2       this.job = \'teacher\';
3    }
4    Parent.prototype.showJob = function(){
5       alert(this.job);
6    }
7    var child = new Parent();
8    child.showJob();      //\'teacher\'

很明显，这个例子中的child获得属性job和一个方法showJob,为什么会获得呢？这时候来看看new Parent()到底做了什么

1  var obj = { };   //obj获得Parent的this引用
2    obj.job = \'teacher\';   
3    obj.__proto__ = Parent.prototype;
4    var child = obj;

所以为什么child获得了属性job，是因为他执行了构造函数，child对象上获得了属性job。而为什么child获得了方法showJob, 是因为对象上有一个隐藏的原型__proto__ ，它指向了Parent.prototype。当我们在对象child上调用方法时，它首先检查对象自己是否具有这个方法，没有的话搜索自己的隐藏原型中有没有这个方法。

所以，原型继承是什么，它的本质是改变其他对象的__proto__，或者说让它丰富起来，以获得父构造函数或者祖先构造函数的方法，请看代码。

1  function Parent(){
2    }
3    Parent.prototype.showJob = function(){}
4    function Child(){
5    }
6    Child.prototype = new Parent();
7    Child.prototype.constructor = Child;
8    var grandChild = new Child();

这时候grandChild获得了showJob方法，因为它的__proto__中有showJob方法，而为什么它的隐式原型中有这个方法呢，因为new Child()中grandChild.__proto__指向了Child的prototype, 至于为什么Child的prototype中有showJob方法，因为Child.prototype.__proto__等于Parent.prototype.
至于为什么有这么一句

1 Child.prototype.constructor = Child;

这是因为原本Child.prototype中有一个constructor属性指向Child本身，当执行Child.prototype = new Parent()的时候，Child.prototype.constructor指向了Parent，否则下一次new Child的时候，constructor的指向就会不正确，当然，这个在实际开发中即时漏掉也不会有大问题，因为我们很少会对constructor进行读写。
以上代码还有另一个问题，为什么我们要把showJob这个方法写在Parent.prototype上呢，如果写成如下

1  function Parent(){
2         this.showJob = function(){}
3     }
4     function Child(){
5     }
6     Child.prototype = new Parent();

当然这样写也可以，child.prototype对象上有了showJob方法，而不是child.prototype.__proto__，这对于我们原型链的继承并没有影响。然而这样写的方法一多，child.prototype对象上的方法就越多，如果new了多次的话，在内存上会比写在原型上多一些消耗。

那么在实际开发中，会怎么实现面向对象的原型继承呢。正常在我们拿到需求的时候，如果需求逻辑复杂，且在多个页面中有相似逻辑的时候，我们就会想到使用面向对象了，因为面向对象解决的就是逻辑的封装和复用。
假设页面A，页面B，页面C中存在相同逻辑，那么我们可以封装父构造函数对象

 1  function Parent(){}
 2    Parent.prototype = {
 3       method1: function(){}，
 4       method2: function(){},
 5       ...
 6    }
 7    function A(){      //页面A
 8       this.A = A;
 9    }
10    A.prototype = new Parent();
11    A.prototype.otherMethod = function(){};
12 
13    var a = new A();   //使用对象
14    a.init...

首先将页面A，页面B，页面C中相同逻辑抽离，相同逻辑可以是同一个ajax请求返回数据，或者是数据格式化等等的相同操作。将这些方法在Parent.prototype中定义，至于A，B，C页面自己特有的方法，则在如A.prototype中定义。这样很好地了解决了我们的问题，逻辑清晰，代码复用性强。如果在Parent方法参数中加入了回调callback,并且在callback中想调用子函数方法或者属性，可以参考我另一篇博文call和apply上手分析

hasOwnProperty

hasOwnProperty方法可以检测一个属性是存在于实例中，还是存在于原型中。

 1  function Parent(){
 2       this.name = \'sysyzhyupeng\';
 3    }
 4    Parent.prototype.job = \'teacher\';
 5    Parent.prototype.showJob = function(){
 6    }
 7    var parent = new Parent();
 8    parent.hasOwnProperty(\'name\');  // true
 9    parent.hasOwnProperty(\'job\');  // false
10    //方法也可以
11    parent.hasOwnProperty(\'showJob\');  // false

in

in运算符和hasOwnProperty不同，只要存在在原型上或者对象上就返回true

 1  function Parent(){
 2       this.name = \'sysyzhyupeng\';
 3    }
 4    Parent.prototype.job = \'teacher\';
 5    Parent.prototype.showJob = function(){
 6    }
 7    var parent = new Parent();
 8    \'name\' in parent;  // true
 9    \'job\' in parent  // true
10    for(_key in parent){
11       console.log(_key);  // \'name\', \'job\', \'showJob\'
12    }

在使用for-in循环时，返回的是所有能通过对象访问的且可枚举的属性。所有开发人正常定义的属性都是可枚举的，只有在IE8及更早版本除外。

Object.keys

ES5的Object.keys方法可以返回对象上的所有可枚举属性(注意只有对象上的，从原型上继承的没有)

如何安全的扩展一个内置对象

给内置对象新增成员和方法，叫做扩展内置对象。这种行为是不可取的。因为原生的内置对象本身就有一些方法和属性，在一个项目中，如果你替换了这些方法，别人就用不到了，容易造成代码崩溃，不宜维护。

如何安全的扩展一个内置对象呢？就比如内置对象Array, 我们既想用它本身的一些方法，又想给它添加一个sayHello（）方法。这样到底怎么去做呢？

首先我们创建一个对象，让这个对象继承内置对象Array，这样Array数组里面的方法就可以在我们创建的对象中使用，然后在我们创建的对象添加我们自定义的方法。这样无论我们怎么修改自己创建的对象里面的方法，都不会影响到内置对象。

 1        function MyArray() {      //自己定义函数对象MyArray 
 2             //我自己定义的属性
 3             this.name = "我是一个数组";
 4             this.sayHello = function () {
 5                 console.log("我的sayHello方法");
 6             }
 7         }
 8 
 9         var arr = new Array();     //内置对象Array创建的对象arr
10         
11         MyArray.prototype = arr;  // 替换原型对象 也就是原型对象继承数组，我的数组中就有了原生数组对象的所有的属性和方法
12         MyArray.prototype.hello =function () {
13             console.log("大家好，我是自定义对象MyArray的原型中的hello方法");
14         }
15         
16         var myArr = new MyArray();  //myArr这个对象就继承自arr
17 
18         myArr.push(100);         //原生内置对象Array自带的push的方法
19         myArr.push(2,3,4,5)
20         console.log(myArr);
21         myArr.sayHello();
22         myArr.hello();