JavaScript一个类继承中实现

JavaScript类是默认原型对象继承:

var Person = function() {
    this.name = "people";
    this.hello = function() {
      console.log("hello user:" + this.name);
    }
}

var User = function() {
    this.name = "user";
    this.hello = function() {
      User.prototype.hello.call(this, arguments);
      console.log("hello user:" + this.name);
    }
}

User.prototype = new Person();
new User().hello();
有没有一种方法。可以让JavaScript的类像Java那样,通过一个superkeyword即调用父类的方法,于是我这样扩展了Function:

(function() {
    Function.prototype.extend = function(baseClass) {

        // this is a function object.
        var oldPrototype = this.prototype, newPrototype = {}, _super = new baseClass();

        //inherits all properties and methods.
        for ( var name in _super) {
            newPrototype[name] = _super[name];
        }

        for ( var name in oldPrototype) {
            // only override properties in this new Class.
            if (oldPrototype.hasOwnProperty(name)) {
                // only function need _super.
                if (typeof oldPrototype[name] == "function" && typeof _super[name] == "function") {
                    newPrototype[name] =  (function(name, fn) {
                            return function() {
                                var tmp = this._super;
                                
                                // set super method
                                this._super = _super[name];

                                var ret = fn.apply(this, arguments);
            
                                this._super = tmp;
            
                                return ret;
                            };
                        })(name, oldPrototype[name]);
                }
            }
        }

        this.prototype = newPrototype;
        
        return this;
    };
})();
測试代码
var A = function() {
    this.hello = function() {
        console.log("hello, I'm A");
    }
};

var B = function() {};

B.prototype = {
    hello : function() {
        this._super();

        console.log("hello, I'm B");
    }
};

B.extend(A);

var C = function() {};

C.prototype = {
    hello : function() {
        this._super();

        console.log("hello, I'm C");
    }
};

C.extend(B);

var b = new B();
var c = new C();

//b.hello();
c.hello();

结果

hello, I'm A
hello, I'm B
hello, I'm C




版权声明:本文博客原创文章。博客,未经同意,不得转载。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 实现继承方法有以下几种方式: 1. 原型继承:利用原型链实现继承。通过将父的实例作为子的原型,子就可以访问到父的属性和方法。例如: ```javascript function Parent() { this.name = 'parent'; } Parent.prototype.sayName = function() { console.log(this.name); } function Child() {} Child.prototype = new Parent(); var child = new Child(); child.sayName(); // 输出:parent ``` 2. 构造函数继承:利用 call 或 apply 方法将父构造函数的作用域赋给子。这种方式可以实现继承。例如: ```javascript function Parent(name) { this.name = name; } function Child(name) { Parent.call(this, name); } var child = new Child('child'); console.log(child.name); // 输出:child ``` 3. 组合继承:结合原型继承和构造函数继承,既可以继承的属性和方法,又可以实现实例的独立。例如: ```javascript function Parent(name) { this.name = name; } Parent.prototype.sayName = function() { console.log(this.name); } function Child(name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); Child.prototype.constructor = Child; var child = new Child('child', 18); console.log(child.name); // 输出:child console.log(child.age); // 输出:18 child.sayName(); // 输出:child ``` 4. 原型式继承:利用 Object.create() 方法创建一个新对象,以某个对象为原型,然后再对新对象进行修改。例如: ```javascript var parent = { name: 'parent', sayName: function() { console.log(this.name); } }; var child = Object.create(parent, { name: { value: 'child' } }); child.sayName(); // 输出:child ``` 5. 寄生式继承:与原型式继承似,但是在增强对象的方法时使用了一个函数封装。例如: ```javascript var parent = { name: 'parent', sayName: function() { console.log(this.name); } }; function createChild(original) { var child = Object.create(original); child.sayName = function() { console.log('hello, ' + this.name); } return child; } var child = createChild(parent); child.sayName(); // 输出:hello, parent ``` 需要注意的是,在实现继承时应该注意避免出现属性和方法的重复定义,以及避免在父的原型上修改引用型的属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值