JavaScript类的写法


Posted in Javascript onSeptember 17, 2016

我们知道,在js中,是没有类的概念的。类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心。

类是对象的抽象,而对象是类的具体实例。类是抽象的,不占用内存,而对象是具体的,占用存储空间。———百度百科

早期的javascript需求都很简单,基本都是写成函数的,然后是面向过程的写法,后来慢慢的引入面向对象开发思想,再后来就慢慢写成类。

在js中,写成类的本质基本都是 构造函数+原型。下面,就讨论一下js类的几种写法:

构造函数法

/**
* Person类:定义一个人,有name属性和getName方法
  */
<script>
  function Person(name){
    this.name = name;
    this.getName = function(){
      return this.name;
    }
  }

  //我们在这里实例化几个对象
  
  var p1 = new Person("trigkit4");
  var p2 = new Person("mike");

  console.log(p1 instanceof Person);//true
  console.log(p2 instanceof Person);//true
</script>

由上面控制台输出结果可知,p1和p2的确是类Person的实例对象。instanceof操作符左边是待检测类的对象,右边是定义类的构造函数。这里,instanceof用来检测对象p1是否属于Person类。

这种方式的优点是:我们可以根据参数来构造不同的对象实例 ,缺点是每次构造实例对象时都会生成getName方法,造成了内存的浪费 。

我们可以用一个外部函数来代替类方法,达到了每个对象共享同一个方法。改写后的类如下:

//外部函数
<script>
  function getName() {
    return this.name;
  }

  function Person(name){
    this.name = name;
    this.getName = getName;//
  }
</script>

原型方式

<script>
  function Person(){};
  Person.prototype.name = "trigkit4";//类的属性都放在prototype上
  Person.prototype.getName = function(){
    return " I'm " + this.name;
  }

  var p1 = new Person();
  var p2 = new Person();
  console.log(p1.name);//trigkit4
  console.log(p2.getName());//I'm trigkit4
</script>

原型方式的缺点就是不能通过参数来构造对象实例 (一般每个对象的属性是不相同的) ,优点是所有对象实例都共享getName方法(相对于构造函数方式),没有造成内存浪费 。

构造函数+原型方式
取前面两种的优点:
a、用构造函数来定义类属性(字段)。
b、用原型方式来定义类的方法。

<script>
  function Person(name){
    this.name = name;
  }

  //原型的特性可以让对象实例共享getName方法
  Person.prototype.getName = function(){
    return " I'm " + this.name;
  }
</script>

这样,我们就既可以构造不同属性的对象,也可以让对象实例共享方法,不会造成内存的浪费。

为了让js代码风格更紧凑,我们让prototype方法代码移到function Person的大括号内。

<script>
  function Person(name){
    this.name = name;
    Person.prototype.getName = function(){
      return name;//不宜用this.name
    }
  }

  var p1 = new Person('trigkit4');
  console.log(p1.getName());//trigkit4
</script>

在这里,我们需要知道的几种定义类的方法,除了上面的构造函数外,还有:

Object.create()方法
用这个方法,"类"就是一个对象,而不是函数。

var Person = {
    name : "trigkit4",
    age : 21,
    run: function(){
      alert("I like running");
    }
  }

然后,直接用Object.create()生成实例,不需要用到new。

var p1 = Object.create(Person);
  alert(p1.age);//21
  p1.run();//I like running

这种方法比"构造函数法"简单,但是不能实现私有属性和私有方法,实例对象之间也不能共享数据,对"类"的模拟不够全面。

createNew()方法
这种方法不需要用到this和prototype,其做法是用对象来模拟一个类,然后在类里面定义一个构造函数createNew(),然后在createNew()里面定义实例对象,把这个实例对象作为返回值。

<script>
  var Person = {

    createNew : function () {
      var person = {};
      person.name = "trigkit4";
      person.run = function(){
        alert("I like running");
      };
      return person;
    }

  }
</script>

使用的时候,调用createNew()方法,就可以得到实例对象。

var p1 = Person.createNew();
  p1.run();//I like running

这种写法其实和对象字面量的写法是很类似的,只不过一个是逗号分隔,一个是分号分隔。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
Javascript Objects详解
Sep 04 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
使用JQuery选择HTML遍历函数的方法
Sep 17 #Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 #Javascript
JavaScript每天必学之数组和对象部分
Sep 17 #Javascript
JavaScript每天必学之基础知识
Sep 17 #Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 #Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 #Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP 中的批处理的实现
2007/06/14 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
平面设计求职信
2014/03/10 职场文书
股份合作协议书
2014/09/10 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
MySQL创建定时任务
2022/01/22 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技