类的优雅写法
栏目: JavaScript · 发布时间: 6年前
内容简介:虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。例子为一个轻提示组件JavaScript的类,是用
虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。
一、例子
例子为一个轻提示组件 Toast
。
需要实现的功能:
on off init
function Toast(option){ this.prompt = ''; this.elem = null; this.init(option); } Toast.prototype = { // 构造器 constructor: Toast, // 初始化方法 init: function(option){ this.prompt = option.prompt || ''; this.render(); this.bindEvent(); }, // 显示 show: function(){ this.changeStyle(this.elem, 'display', 'block'); }, // 隐藏 hide: function(){ this.changeStyle(this.elem, 'display', 'none'); }, // 画出dom render: function(){ var html = ''; this.elem = document.createElement('div'); this.changeStyle(this.elem, 'display', 'none'); html += '<a class="J-close" href="javascript:;">x</a>' html += '<p>'+ this.prompt +'</p>'; this.elem.innerHTML = html; return document.body.appendChild(this.elem); }, // 绑定事件 bindEvent: function(){ var self = this; this.addEvent(this.elem, 'click', function(e){ if(e.target.className.indexOf('J-close') != -1){ console.log('close Toast!'); self.hide(); } }); }, // 添加事件方法 addEvent: function(node, name, fn){ var self = this; node.addEventListener(name, function(){ fn.apply(self, Array.prototype.slice.call(arguments)); }, false); }, // 改变样式 changeStyle: function(node, key, value){ node.style[key] = value; } }; var T = new Toast({prompt:'I\'m Toast!'}); T.show(); 复制代码
二、类的构成
JavaScript的类,是用 函数对象
来实现。
类的实例化形式如下:
var T = new Toast(); 复制代码
其中的重点,就是 Function
的编写。
类分为两部分: constructor
+ prototype
。也即 构造器
+ 原型
。
2.1 构造器
构造器从直观上来理解,就是写在 函数内部的代码 。 从Toast例子上看,构造器就是以下部分:
function Toast(option){ this.prompt = ''; this.elem = null; this.init(option); } 复制代码
这里的 this
,指向的是实例化的类。
每次通过 new Toast()
的方式进行实例化, 构造器都会执行一遍
。
2.2 原型
原型上的方法和变量的声明,都是通过 Toast.prototype.*
的方式。
那么在原型上普通的写法如下:
Toast.prototype.hide = function(){/*code*/} Toast.prototype.myValue = 1; 复制代码
但是,该写法不好的地方:就是每次都要写前半部分 Toast.prorotype
,略显累赘。
在代码压缩优化方面也不友好,无法做到最佳的压缩。
改进的方式如下:
Toast.prorotype = { constructor: Toast, hide: function(){/*code*/}, myValue: 1 } 复制代码
这里的优化,是把原型指向一个新的空对象 {}
。
带来的好处,就是可以用 {key:value}
的方式写原型上的方法和变量。
但是,这种方式会改变原型上构造器 prototype.constructor
的指向。
如果不重新显式声明 constructor
的指向, Toast.constructor.prototype.constructor
的会隐式被指向 Object
。而正确的指向,应该是 Toast
。
虽然通过 new
实例化没有出现异常,但是在类继承方面, constructor
的指向异常,会产生不正确的继承判断结果。这是我们不希望看到的。
所以,需要修正 constructor
。
2.3 构造器和原型的不同
原型上的方法和变量,是该类所有实例化对象 共享
的。也就是说,只有一份。
而构造器内的代码块,则是每个实例化对象 单独占有
。不管是否用 this.**
方式,还是私有变量的方式,都是独占的。
所以,在写一个类的时候,需要考虑该新增属性是共享的,还是独占的。以此,决定在构造器还是原型上进行声明。
前端全栈交学习流圈:866109386。 欢迎大家进入交流吹水。
三、代码规范
- 类的命名规范,业界有不成文的规定,就是首字母大写。
- 原型上的私有方法,默认以下划线开始。这种只是团队合作方面有review代码的好处,实际上还是暴露出来的方法。
四、使实例化与new无关
类的实例化,一个强制要求的行为,就是需要使用new操作符。如果不使用new操作符,那么构造器内的this指向,将不是当前的实例化对象。
优化的方式,就是使用 instanceof
做一层防护。
function Toast(option){ if(!(this instanceof Toast)){ return new Toast(option); } this.prompt = ''; this.elem = null; this.init(option); } 复制代码
从上述代码可以看出,使用这个技巧,可以防止团队一些大头虾出现使用错误实例化方式,导致代码污染的问题。 这种忍者技巧很酷,但从另一方面考虑,还是希望使用者可以用正确的方式去实例化类。 所以,改成以下这种防护方式
function Toast(option){ if(!(this instanceof Toast)){ throw new Error('Toast instantiation error'); } this.prompt = ''; this.elem = null; this.init(option); } 复制代码
这样,把锅甩回去,岂不是更妙:alien:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Scratch少儿趣味编程
[ 日] 阿部和广 / 陶 旭 / 人民邮电出版社 / 2014-11 / 59.00元
Scratch 是麻省理工学院设计开发的一款编程工具,是适合少儿学习编程和交流的工具和平台,有中文版且完全免费。本书结合孩子们学习的语文、数学、科学、社会、音乐、体育等科目,手把手地教大家如何用Scratch 设计程序(如设计一个自动写作文的程序),配合各式卡通形象,通俗易懂,寓教于乐。麻省理工学院教授米切尔•瑞斯尼克作序推荐。 本书图文并茂,生动风趣,适合中小学生等初学者自学或在家长的帮助......一起来看看 《Scratch少儿趣味编程》 这本书的介绍吧!