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代码
Sep 17 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
vue vant中picker组件的使用
Nov 03 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
php与js的区别是什么
2013/08/05 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Python的形参和实参使用方式
2019/12/24 Python
django ajax发送post请求的两种方法
2020/01/05 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
python获取整个网页源码的方法
2020/08/03 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
体育教师自荐信范文
2013/12/16 职场文书
给领导的致歉信范文
2014/01/13 职场文书
如何写自我鉴定
2014/03/19 职场文书
安全生产工作汇报
2014/10/28 职场文书
预备党员半年考察意见
2015/06/01 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS