关闭

JavaScript面向对象编程中_优雅的类写法

时间: 2018-07-20阅读: 1035标签: 对象

前言

虽然现在已经是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 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.**方式,还是私有变量的方式,都是独占的。

所以,在写一个类的时候,需要考虑该新增属性是共享的,还是独占的。以此,决定在构造器还是原型上进行声明。


三、代码规范

  • 类的命名规范,业界有不成文的规定,就是首字母大写。
  • 原型上的私有方法,默认以下划线开始。这种只是团队合作方面有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);
}

这样,把锅甩回去,岂不是更妙

作者:wall
来源:http://wangxiaokai.vip/posts/2018-06-25-class-of-OOP/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/944

关闭

JS所有内置对象属性和方法汇总

对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索、发现、征服。我们都知道,JavaScript有3大对象,分别是本地对象、内置对象和宿主对象

简单实现在Js中克隆对象

JavaScript 的原始数据类型(例如number、string、null,undefined 和 boolean)是不可变的,这意味着一旦创建,它们的值就无法更改。但是对象和数组是可变的,允许在创建后修改其值。实际上,这意味着基元是通过值传递的

js获取object对象的长度

我们都知道必须是具体数据类型才有长度,所以size和length都无法测量object对象的长度,那么如何计算对象的长度,即获取对象属性的个数呢?

JavaScript Blob 对象解析

Blob是JavaScript内建对象,表示不可变的原始数据,类似文件的对象。blob是表示原始数据的不可变对象,这些数据不一定是javascript原生格式的,文件接口基于Blob,继承Blob功能并将其扩展为支持用户系统上的文件。

JS 的 Document对象

Document 对象是是window对象的一个属性,因此可以将document对象作为一个全局对象来访问。当浏览器载入 HTML 文档, 它就会成为 Document 对象。Document对象的 属性和方法

JS构造函数、原型对象、隐含参数this

解析器再调用函数每次都会向函数内部传递一个隐含的参数this,this指向的是一个对象(函数执行的上下文对象),使用工厂的方法创建对象:通过该方法可以大批量的创建对象,这样创建的对象使用的构造函数都是Object,无法区分多种不同类型的对象。

JavaScript 的代理对象

JavaScript 支持 setters 和 getters 已经很长时间了。他们用带有 set 和 get 关键字的简单语法来拦截对象的属性访问和值的修改操作。

JS之BOM的几个对象

BOM(Browser Object Model)即浏览器对象模型。 BOM提供了独立于内容 而与浏览器窗口进行交互的对象; 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;

Window对象在前端领域的角色

在js的领域,window对象有着双重角色,既是用来访问浏览器窗口的接口,又是Global对象。也正因为此,所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。

javascript中如何创建对象?

javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象。那么,既然是面象对象的,如何来创建对象呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!