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 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
js图片自动切换效果处理代码
May 07 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
浅谈JavaScript中的“!!”作用
Aug 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中in_array的隐式转换的解决方法
2018/03/06 PHP
JavaScript基础知识之数据类型
2012/08/06 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python+django快速实现文件上传
2016/10/24 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
10个Python小技巧你值得拥有
2018/09/29 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
python中有函数重载吗
2020/05/28 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
护士岗位职责
2014/02/16 职场文书
行政内勤岗位职责
2014/04/07 职场文书
同学聚会策划方案
2014/06/06 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
Linux中各个目录的作用与内容
2022/06/28 Servers