首页 > #小白的困惑#JavaScript如何封装重定义了prototype的原型?

#小白的困惑#JavaScript如何封装重定义了prototype的原型?

在我的认知里修改一个原型的prototype是写成这样的

function creatA(){
    this.A = function(){};
    /*
    this.B = ...
    this.C = ...
    blablabla
    */
}
creatA.prototype = {
    test1 : "test1",
    test2 : function(){}
};

但是如果这样封装的话,在html里面也能访问或者修改prototype里的值的样子。


请问怎么能够让外部不能访问呢?再封装一层吗?如果是这样那在html里初始化的时候改如何初始化呢?(想了很久搞得心情有点毛躁...翻书居然都翻不到了!)求各路大神来拯救一下我这个小白。


如果可以的话请带具体的例子!谢谢了!


首先你这种叫法是不对的。这就是js面向对象的写法哈,叫重新定义prototype原型总感觉怪怪的。

大胆猜测你想要的效果可能如下:


(function(window, undefined) {
    'use strict'
    
    // 定义内部使用的变量
    var a = 0,
        b = 2;


    // 定义内部使用的方法
    function isFn() {
        return a > b ? false : true;
    }

    // 定义构造函数
    var CreateA = function(num1, num2) {
        this.num1 = num1;
        this.num2 = num2;
    }

    // 往原型上添加共有方法
    CreateA.prototype = {
        constructor: CreateA,
        getNum1: function() {
            if (isFn()) {
                return this.num1;
            }
            return false;
        },
        getNum2: function() {
            if (!isFn()) {
                return this.num2;
            }
            return false;
        }
    }

    // 让外界可以访问该对象
    window.CreateA = CreateA;
    
})(window);

外部访问与使用

var c = new CreateA(100, 200);
c.getNum1(); // 返回100
c.getNum2(); // 返回200

原理通过 立即执行函数 (或某一个作用域)封装。

  1. 手写

    (function(){
    // ...
    // 挂载到全局变量上(window或global等) 或 返回值(函数或其他对象)
    })();

  2. 工具或库

借助 webpack、browserify,requrejs和seajs等方式进行模块化开发(amd,cmd,umd等规范),写好模块接口即可。

可以多看看开源的源码~


题主的原意是不是想要让prototype在内部是可访问的,外部是只读的呢?如果是的话这样的可以考虑使用ES5中提供的静态对象的概念。
上手写个例子吧

`var container = (function () {
    function ClassA() {
        this.attr1 = 'attr1';
    }
    var classAPrototype = {
        get: {
            value: function () {
                console.log('class get');
            },
            writable: false, // 只读
            enumerable: false,//不是枚举
            configurable: false // 不可配置
        }
    }
    return {
        newA: function () {
            var a = new ClassA();
            Object.defineProperties(a, classAPrototype);
            return a;
        }
    }
})();

var a=container.newA()
a.get();//输出:class get
a.get=function () {
    console.log('new get');
}
a.get();//输出:class get  说明属性未被修改`
【热门文章】
【热门文章】