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 相关文章推荐
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
vue一步步实现alert功能
Jul 05 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue filters的使用详解
Jun 11 Javascript
详解vue项目打包步骤
Mar 29 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
使用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
php+oracle 分页类
2006/10/09 PHP
php正则表达式(regar expression)
2011/09/10 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python实现的爬虫功能代码
2017/06/24 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python实现自动解数独小程序
2019/01/21 Python
python代码中怎么换行
2020/06/17 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
Final类有什么特点
2012/04/25 面试题
管理学专业个人求职信范文
2013/09/21 职场文书
初中教师个人总结
2015/02/10 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书