首页>建站相关>javascript定义类的极简主义方法

javascript定义类的极简主义方法

最早应该是在阮一峰老师的博客上看到的这种类的构建方法,据说是由荷兰程序员 Gabor de Mooij 提出的一种比 Object.create ()更好的创建类的方法,他称这种方法为"极简主义法"(minimalist approach)。这种方法不使用 this 和 prototype,代码部署起来非常简单,这大概也是它被叫做"极简主义法"的原因。首先,它也是用一个对象模拟"类"。在这个类里面,定义一个构造函数 createNew (),用来生成实例。

类的创建

var Book={
    createNew: function(){
        var book={};
        book.material='paper';
        book.technology='print';
        return book;
    }
}
var english=Book.createNew();

利用createNew方法实例化之后,english的内容如下:

Object { material: "paper", technology: "print" }

类的继承

var Book={
    createNew: function(){
        var book={};
        book.material='paper';
        book.technology='print';
        return book;
    }
}

var Dict={
    createNew: function(){
        var dict=Book.createNew();
        dict.package='box';
        return dict;
    }
}
var english=Dict.createNew();

重新利用createNew方法实例化之后,english的内容如下:

Object { material: "paper", technology: "print", package: "box" }

添加变量

var Book={
    createNew: function(){
        var book={};
        book.material='paper';
        book.technology='print';
    return book;
    }
}

var Dict={
    createNew: function(language,price){
        var dict=Book.createNew();
        dict.package='box';
        dict.price=price;
        dict.language=language;
    return dict;
    }
}
var english=Dict.createNew('english',88);

新的english的对象内容如下:

Object { material: "paper", technology: "print", package: "box", price: 88, language: "english" }

私有变量和内部变量

在createNew()方法中,只要不是定义在cat对象上的方法和属性,都是私有的。

var Book={
  
    createNew: function(){
        var book={};
        book.material='paper';
        book.technology='print';
    return book;
    }
}

var Dict={
    createNew: function(language,price){
        var dict=Book.createNew();
        package='box';
        dict.price=price;
        dict.language=language;
    dict.showPackage=function(){console.log(package);};
    return dict;
    }
}
var english=Dict.createNew('english',88);

这个例子中的package就是一个内部变量,它只能被showPackage读取到;

var Book={
  
    createNew: function(){
        var book={};
        book.material='paper';
        book.technology='print';
        book.changeMaterial = function(x){ book.material = x; };
    return book;
    }
}

var Dict={
    createNew: function(language,price){
        var dict=Book.createNew();
        package='box';
        dict.price=price;
        dict.language=language;
        dict.showPackage=function(){console.log(package);};
    return dict;
    }
}
var english=Dict.createNew('english',88);
var japanese=Dict.createNew('japanese',88);
japanese.changeMaterial('wood');

这个例子的运行结果如下:

english
Object { material: "paper", technology: "print", changeMaterial: changeMaterial(x), price: 88, language: "english", showPackage: showPackage()
 }
japanese
Object { material: "wood", technology: "print", changeMaterial: changeMaterial(x), price: 88, language: "japanese", showPackage: showPackage() }

数据共享

有时候,我们需要所有实例对象,能够读写同一项内部数据。这个时候,只要把这个内部数据,封装在类对象的里面、createNew()方法的外面即可。

var Book={
    material:'paper', 
    createNew: function(){
        var book={};
        book.technology='print';
        book.changeMaterial = function(x){ Book.material = x; };
        book.showMaterial = function(){ console.log(Book.material); };
    return book;
    }
}

var Dict={
    createNew: function(language,price){
        var dict=Book.createNew();
        package='box';
        dict.price=price;
        dict.language=language;
        dict.showPackage=function(){console.log(package);};
    return dict;
    }
}
var english=Dict.createNew('english',88);
var japanese=Dict.createNew('japanese',88);
japanese.changeMaterial('wood');

在这个实例中,changeMaterial将内部变量material从paper修改为了wood,程序运行结果如下:

english.showMaterial()  --> wood 

japanese.showMaterial()  --> wood

标签: javascript

移动端可扫我直达哦~

推荐阅读

javascript 2023-10-13

用jquery取代a链接的title说明文字

站点的标签页原来是类似下图左侧的,在标签后用括号的形式展示了文章数量,边栏本来就小,加了数字后感觉内容变长,也有点影响标签文字的识别,就想着改成下图右侧的形式。记录一下原来生成含数字标签的代码,方便以后修改时的查询:<?php ...

建站相关 javascript

javascript 2023-10-11

js正则表达式的匹配与替换操作

利用exec()可以提取到某一段字符串中的指定的值,比如有下面这样一行字符串:a='-aaaa-bbbb-cccc-';想要分别提取其中的连续的字符,即“aaaa”、“bbbb”、“cccc”,书写正则表达式如下,并利用exec()函...

建站相关 javascript

javascript 2023-10-09

双栏多栏主题图片的lazyload问题

想为全站添加lazyload效果,这样在图片加载成功后会得到一个渐变显示的效果,看起来酷酷的。使用jquery的lazyload老牌插件,先写的js效果,后添加的模块,左边栏的图片加载的好好的,等到右边栏输出缩略图时,就出现了问题。l...

建站相关 javascript

javascript 2023-09-27

php如何传递数据给前端的javascript

尝试写主题的时候遇到了需要利用后台的设置数据去改变前端javascript设置的需求,比如后台设置一个幻灯的轮播速度为“5000”毫秒,需要将这个数据传递给js插件“slidejs”。最初的做法是利用php直接输出一段标签,类似下面这...

建站相关 javascript

javascript 2023-05-28

利用js获取当前页面的域名与网络协议等信息

浏览器会在用户有历史搜索记录之后自动弹出一些关键词供用户选择。但弹出的窗口的位置往往距离输入框过近,弹窗样式也不是特别好看。所以准备参考360,记录用户的搜索关键词,以标签的形式放在弹出窗口中,当输入框获取到焦点时,弹出自定义的窗口,...

建站相关 javascript

javascript 2023-05-09

利用localStorage保存用户的浏览记录

尝试在页面上加载了一言,没事刷新页面就会看到一条新的记录。偶然刷到这样一句话:“大佬永远都觉得自己是萌新”,秉承这种态度的人,一方面可能是出自谦虚。另一方面,技术迭代日新月异,知识浩如烟海,能在某一方面保持拔尖的人,确实为数不多。说回...

建站相关 javascript

javascript 2023-04-27

利用console.time来测试一下js程序的执行效率

想测试一下自己的程序跑一圈需要多少时间,可以尝试启动一个计时器来跟踪它的占用时长。每一个计时器必须拥有唯一的名字。当以此计时器名字为参数调用 console.timeEnd() 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间。启...

建站相关 javascript

javascript 2023-04-10

利用lazysizes.js实现图片懒加载

站点的专题图片稍有点大,恩,其实主要是服务器的带宽过小。导致访问的时候图片加载过慢,页眉部分会空出一块,直到加载结束。于是就想参照joe主题的样式,做一个图片懒加载的效果。joe主题使用了lazysizes实现图片的懒加载。于是查询了...

建站相关 javascript