• JavaScript简洁继承机制实现(不使用prototype和new)


          此方法并非笔者原创,笔者只是在前辈的基础上,加以总结,得出一种简洁实用的JavaScript继承方法。

          传统的JavaScript继承基于prototype原型链,并且需要使用大量的new操作,代码不够简洁,可读性也不是很强,貌似还容易受到原型链污染。

          笔者总结的继承方式,简洁明了,虽然不是最好的方式,但希望能给读者带来启发。

          好了,废话不多说,直接看代码,注释详尽,一看就懂~~~

      1 /**
      2  * Created by 杨元 on 14-11-11.
      3  * 不使用prototype实现继承
      4  *
      5  */
      6 
      7 /**
      8  * Javascript对象复制,仅复制一层,且仅复制function属性,不通用!
      9  * @param obj  要复制的对象
     10  * @returns  Object
     11  */
     12 Object.prototype.clone = function(){
     13     var _s = this,
     14         newObj = {};
     15     _s.each(function(key, value){
     16         if(Object.prototype.toString.call(value) === "[object Function]"){
     17             newObj[key] = value;
     18         }
     19     });
     20     return newObj;
     21 };
     22 
     23 /**
     24  * 遍历obj所有自身属性
     25  *
     26  * @param callback 回调函数。回调时会包含两个参数: key 属性名,value 属性值
     27  */
     28 Object.prototype.each = function(callback){
     29     var key = "",
     30         _this = this;
     31     for (key in _this){
     32         if(Object.prototype.hasOwnProperty.call(_this, key)){
     33             callback(key, _this[key]);
     34         }
     35     }
     36 };
     37 
     38 /**
     39  * 创建子类
     40  * @param ext obj,包含需要重写或扩展的方法。
     41  * @returns Object
     42  */
     43 Object.prototype.extend = function(ext){
     44     var child = this.clone();
     45     ext.each(function(key, value){
     46         child[key] = value;
     47     });
     48     return child;
     49 };
     50 
     51 /**
     52  * 创建对象(实例)
     53  * @param arguments 可接受任意数量参数,作为构造器参数列表
     54  * @returns Object
     55  */
     56 Object.prototype.create = function(){
     57     var obj = this.clone();
     58     if(obj.construct){
     59         obj.construct.apply(obj, arguments);
     60     }
     61     return obj;
     62 };
     63 
     64 
     65 /**
     66  * Useage Example
     67  * 使用此种方式继承,避免了繁琐的prototype和new。
     68  * 但是目前笔者写的这段示例,只能继承父类的function(可以理解为成员方法)。
     69  * 如果想继承更丰富的内容,请完善clone方法。
     70  *
     71  *
     72  */
     73 
     74 /**
     75  * 动物(父类)
     76  * @type {{construct: construct, eat: eat}}
     77  */
     78 var Animal = {
     79     construct: function(name){
     80         this.name = name;
     81     },
     82     eat: function(){
     83         console.log("My name is "+this.name+". I can eat!");
     84     }
     85 };
     86 
     87 /**
     88  * 鸟(子类)
     89  * 鸟类重写了父类eat方法,并扩展出fly方法
     90  * @type {子类|void}
     91  */
     92 var Bird = Animal.extend({
     93     eat: function(food){
     94         console.log("My name is "+this.name+". I can eat "+food+"!");
     95     },
     96     fly: function(){
     97         console.log("I can fly!");
     98     }
     99 });
    100 
    101 /**
    102  * 创建鸟类实例
    103  * @type {Jim}
    104  */
    105 var birdJim = Bird.create("Jim"),
    106     birdTom = Bird.create("Tom");
    107 
    108 birdJim.eat("worm");  //My name is Jim. I can eat worm!
    109 birdJim.fly();  //I can fly!
    110 
    111 birdTom.eat("rice");  //My name is Tom. I can eat rice!
    112 birdTom.fly();  //I can fly!
  • 相关阅读:
    Object.assign()方法
    JavaScript对象(二)
    JavaScript对象(一)
    vue开发中遇到的问题集锦(2)
    Python:str.ljust()、str.rjust()、str.center()函数
    Python:如何将多个小字符串拼接成一个大的字符串
    Python:.join()函数
    Python:生成器表达式
    VS Code:快捷方式
    Python:如何调整字符串中文本的格式
  • 原文地址:https://www.cnblogs.com/iyangyuan/p/4116601.html
Copyright © 2020-2023  润新知