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 相关文章推荐
基于jquery自定义图片热区效果
Jul 21 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
javascript中如何判断类型汇总
May 14 Javascript
javascript实现计算器功能
Mar 30 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
一个程序下载的管理程序(一)
2006/10/09 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python Property属性的2种用法
2015/06/21 Python
python遍历目录的方法小结
2016/04/28 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
关于教师节的广播稿
2014/09/10 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
Java 多线程协作作业之信号同步
2022/05/11 Java/Android