Heim >Web-Frontend >js-Tutorial >Tutorial zur JavaScript-Verbesserung – Objekterstellungsmuster

Tutorial zur JavaScript-Verbesserung – Objekterstellungsmuster

高洛峰
高洛峰Original
2016-10-15 17:05:16974Durchsuche

Einführung

In diesem Artikel wird hauptsächlich der zweite Teil des Musters zum Erstellen von Objekten vorgestellt. Durch die Verwendung verschiedener Techniken können Fehler erheblich vermieden oder sehr optimierter Code geschrieben werden.

Modus: Funktionssyntaxzucker

Funktionssyntaxzucker ist eine Erweiterung, die einem Objekt schnell Methoden (Funktionen) hinzufügt. Der Code ist relativ einfach Schauen Sie sich zuerst den Implementierungscode an:

if (typeof Function.prototype.method !== "function") {
    Function.prototype.method = function (name, implementation) {
        this.prototype[name] = implementation;
        return this;
    };
}
扩展对象的时候,可以这么用:

var Person = function (name) {
    this.name = name;
}
.method('getName',
            function () {
                return this.name;
            })
.method('setName', function (name) {
    this.name = name;
    return this;
});
这样就给Person函数添加了getName和setName这2个方法,接下来我们来验证一下结果:

var a = new Person('Adam');
console.log(a.getName()); // 'Adam'
console.log(a.setName('Eve').getName()); // 'Eve'
模式7:对象常量

对象常量是在一个对象提供set,get,ifDefined各种方法的体现,而且对于set的方法只会保留最先设置的对象,后期再设置都是无效的,已达到别人无法重载的目的。实现代码如下:

var constant = (function () {
    var constants = {},
        ownProp = Object.prototype.hasOwnProperty,
    // 只允许设置这三种类型的值
        allowed = {
            string: 1,
            number: 1,
            boolean: 1
        },
        prefix = (Math.random() + "_").slice(2);

    return {
        // 设置名称为name的属性
        set: function (name, value) {
            if (this.isDefined(name)) {
                return false;
            }
            if (!ownProp.call(allowed, typeof value)) {
                return false;
            }
            constants[prefix + name] = value;
            return true;
        },
        // 判断是否存在名称为name的属性
        isDefined: function (name) {
            return ownProp.call(constants, prefix + name);
        },
        // 获取名称为name的属性
        get: function (name) {
            if (this.isDefined(name)) {
                return constants[prefix + name];
            }
            return null;
        }
    };
} ());
验证代码如下:

// 检查是否存在
console.log(constant.isDefined("maxwidth")); // false

// 定义
console.log(constant.set("maxwidth", 480)); // true

// 重新检测
console.log(constant.isDefined("maxwidth")); // true

// 尝试重新定义
console.log(constant.set("maxwidth", 320)); // false

// 判断原先的定义是否还存在
console.log(constant.get("maxwidth")); // 480


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:JS-Klammer-Matching-ProblemNächster Artikel:JS-Klammer-Matching-Problem