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一些不错的函数脚本代码
Sep 10 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
vuex的简单使用教程
2018/02/02 Javascript
vue内置指令详解
2018/04/03 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
专升本个人自我评价
2013/12/22 职场文书
爱情保证书范文
2014/02/01 职场文书
党员实事承诺书
2014/03/26 职场文书
测绘工程专业求职信
2014/07/15 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
个人先进事迹总结
2015/02/26 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
详解Vue的列表渲染
2021/11/20 Vue.js