js中的类，对象和继承

最新推荐文章于 2022-12-28 16:30:52 发布

rootes

最新推荐文章于 2022-12-28 16:30:52 发布

阅读量914

点赞数

分类专栏：前端文章标签： js类 js对象及继承 js apply js call js prototype

本文链接：https://blog.csdn.net/rootes/article/details/16989017

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

/*
 *一个例子让你理解js中的类，对象和继承的关系
 * 阅读前需要了解以下几个js方法的用途：prototype，apply，call,不懂就google吧,另外，arguments、callee、caller也顺便看看吧。需要说的是，js的继承机制与传统面向对象语言中的继承有着质的不同。
 * js中的继承，都是直接将基类中的方法和属性直接复制给继承类，就这么简单。
 */
//基类
function baseClass() {
    this.showMsg = function () {
        alert("baseClass::showMsg");
    }
    this.baseShowMsg = function () {
        alert("baseClass::baseShowMsg");
    }
}

//原型法扩展baseClass
baseClass.prototype = {
    baseShowProtoMsg: function () {
        alert("baseClass:baseShowProtoMsg");
    }
}

//全局唯一对象，不能实例化，也无法被extendClass继承，只能直接通过如下方式调用：baseClass.showMsg()
baseClass.showMsg = function () {
    alert("baseClass::showMsg static");
}

//扩展类
function extendClass() { //继承方式一 通过apply方法继承
    /*
     *在此处使用apply方法继承，extendClass的showMsg不会被baseClass的showMsg覆盖，baseShowProtoMsg不会被继承
     */
    //baseClass.apply(this,arguments); 

    this.showMsg = function () {
        alert("extendClass::showMsg");
    }
    /*
     *在此处使用apply方法继承，extendClass的showMsg将被baseClass的showMsg覆盖
     *baseClass中通过prototype扩展的方法baseShowProtoMsg不会被apply方式继承
     */
    //baseClass.apply(this, arguments);
}

/*
 *继承方式二 通过prototype继承baseClass，此处实际上是复制baseClass的属性和方法给extendClass，extendClass中已存在的属性和方法将不会被复制
 *baseClass中通过prototype扩展的方法baseShowProtoMsg也会被继承
 */
extendClass.prototype = new baseClass(); //extendClass将baseClass的方法和属性全部克隆了一遍,使用这种继承方法，extendClass的showMsg不会被baseClass的showMsg覆盖

//实例化extendClass
var instance = new extendClass();

instance.showMsg(); //显示extendClass::showMsg

instance.baseShowProtoMsg(); //显示baseClass:baseShowProtoMsg

instance.baseShowMsg(); //显示baseClass::baseShowMsg

instance.showMsg(); //显示extendClass::showMsg

//call方法使instance调用baseClass的showMsg函数，即showMsg中的this指的是instance对象
baseClass.showMsg.call(instance); //显示baseClass::showMsg static

//实例化baseClass
var baseinstance = new baseClass();

//注意此处call得到的结果，与上面调用call的差别
baseinstance.showMsg.call(instance); //显示baseClass::showMsg