一、js中的类

  类:在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法。

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。但是可以用一些变通的方法,模拟出"类"。

参考阮一峰老师的定义类的三种方法

Javascript定义类(class)的三种方法

一、构造函数法

  这是经典方法,也是教科书必教的方法。它用构造函数模拟"类",在其内部用this关键字指代实例对象。

  function Cat() {

    this.name = "大毛";

  }

生成实例的时候,使用new关键字。

  var cat1 = new Cat();

  alert(cat1.name); // 大毛

类的属性和方法,还可以定义在构造函数的prototype对象之上。

  Cat.prototype.makeSound = function(){

    alert("喵喵喵");

  }

  它用构造函数模拟"类",在其内部用this关键字指代实例对象。

  function Cat() {

    this.name = "大毛";

  }

  生成实例的时候,使用new关键字。

  var cat1 = new Cat();

  alert(cat1.name); // 大毛

二、Object.create()法

为了解决"构造函数法"的缺点,更方便地生成对象,Javascript的国际标准ECMAScript第五版(目前通行的是第三版),提出了一个新的方法Object.create()。

用这个方法,"类"就是一个对象,不是函数。

  var Cat = {

    name: "大毛",

    makeSound: function(){ alert("喵喵喵"); }

  };

然后,直接用Object.create()生成实例,不需要用到new。

  var cat1 = Object.create(Cat);

  alert(cat1.name); // 大毛

  cat1.makeSound(); // 喵喵喵

目前,各大浏览器的最新版本(包括IE9)都部署了这个方法。如果遇到老式浏览器,可以用下面的代码自行部署。

  if (!Object.create) {

    Object.create = function (o) {

       function F() {}

      F.prototype = o;

      return new F();

    };

  }

这种方法比"构造函数法"简单,但是不能实现私有属性和私有方法,实例对象之间也不能共享数据,对"类"的模拟不够全面。

三、极简主义法

荷兰程序员Gabor de Mooij提出了一种比Object.create()更好的新方法,他称这种方法为"极简主义法"(minimalist approach)。这也是我推荐的方法。

3.1 封装

这种方法不使用this和prototype,代码部署起来非常简单,这大概也是它被叫做"极简主义法"的原因。

首先,它也是用一个对象模拟"类"。在这个类里面,定义一个构造函数createNew(),用来生成实例。

  var Cat = {

    createNew: function(){

      // some code here

    }

  };

然后,在createNew()里面,定义一个实例对象,把这个实例对象作为返回值。

  var Cat = {

    createNew: function(){

      var cat = {};

      cat.name = "大毛";

      cat.makeSound = function(){ alert("喵喵喵"); };

      return cat;

    }

  };

使用的时候,调用createNew()方法,就可以得到实例对象。

  var cat1 = Cat.createNew();

  cat1.makeSound(); // 喵喵喵

这种方法的好处是,容易理解,结构清晰优雅,符合传统的"面向对象编程"的构造,因此可以方便地部署下面的特性。

3.2 继承

让一个类继承另一个类,实现起来很方便。只要在前者的createNew()方法中,调用后者的createNew()方法即可。

先定义一个Animal类。

  var Animal = {

    createNew: function(){

      var animal = {};

      animal.sleep = function(){ alert("睡懒觉"); };

      return animal;

    }

  };

然后,在Cat的createNew()方法中,调用Animal的createNew()方法。

  var Cat = {

    createNew: function(){

      var cat = Animal.createNew();

      cat.name = "大毛";

      cat.makeSound = function(){ alert("喵喵喵"); };

      return cat;

    }

  };

这样得到的Cat实例,就会同时继承Cat类和Animal类。

  var cat1 = Cat.createNew();

  cat1.sleep(); // 睡懒觉

3.3 私有属性和私有方法

在createNew()方法中,只要不是定义在cat对象上的方法和属性,都是私有的。

  var Cat = {

    createNew: function(){

      var cat = {};

      var sound = "喵喵喵";

      cat.makeSound = function(){ alert(sound); };

      return cat;

    }

  };

上例的内部变量sound,外部无法读取,只有通过cat的公有方法makeSound()来读取。

  var cat1 = Cat.createNew();

  alert(cat1.sound); // undefined

3.4 数据共享

有时候,我们需要所有实例对象,能够读写同一项内部数据。这个时候,只要把这个内部数据,封装在类对象的里面、createNew()方法的外面即可。

  var Cat = {

    sound : "喵喵喵",

    createNew: function(){

      var cat = {};

      cat.makeSound = function(){ alert(Cat.sound); };

      cat.changeSound = function(x){ Cat.sound = x; };

      return cat;

    }

  };

然后,生成两个实例对象:

  var cat1 = Cat.createNew();

  var cat2 = Cat.createNew();

  cat1.makeSound(); // 喵喵喵

这时,如果有一个实例对象,修改了共享的数据,另一个实例对象也会受到影响。

  cat2.changeSound("啦啦啦");

  cat1.makeSound(); // 啦啦啦

js中的继承

在 javaScript 中,每个对象都有一个指向它的原型(prototype)对象的内部链接。(使用构造函数法模拟类 函数仍是 对象)这个原型对象又有自己的原型,直到某个对象的原型为null 为止(也就是不再有原型指向),组成这条链的最后一环。这种一级一级的链结构就称为原型链.

利用prototype来实现继承

定义一个Person类

function  Person(){this.sayHello = function(){ alert("helloworld"); } } Person.prototype.setName=function(name){ this.name = name; } Person.prototype.getName=function(){ return this.name; } var p = new Person(); p.sayHello(); p.setName("wang"); alert(p.getName());

现在我们定义一个Student类来继续Person类:

function Student(){}
Student.prototype = new Person(); var s = new Student(); s.sayHello(); s.setName("xi"); alert(s.getName());

这样Student类即继承了Person类。

使用javaScript的闭包来完成继承:

1.什么是js的闭包

js闭包Demo:

    function A(){ function B(){ alert("Hello Closure!"); } return B; } var b = A(); b();//Hello Closure! 

这是史上最简单的闭包,不能再简单了,再简单就不是闭包了!B为在函数内部定义的函数,用A函数返回,并用b来接收,也就是说在函数内部定义的函数,在外部使用,这种现象为闭包,所以继承的封装是闭包的一种应用。

2.闭包的作用

avascript中的GC机制:在javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收,否则这个对象一直会保存在内存中。

在上述例子中,B定义在A中,因此B依赖于A,而外部变量b又引用了B, 所以A间接的被b引用,也就是说,A不会被GC回收,会一直保存在内存中。 
这就是闭包的作用,有时候我们需要一个模块中定义这样一个变量:希望这个变量一直保存在内存中但又不会“污染”全局的变量,这个时候,我们就可以用闭包来定义这个模块。

转载于:https://www.cnblogs.com/zhangxintong1314/p/6508788.html

js中的类、继承、闭包相关推荐

  1. new 实例化对象是啥意思_二. 初步认识JS中的类和对象

    1 构造函数的定义 在JS中, 没有类(class)的概念, 主要是通过构造函数来模拟的. 语法 function 构造函数名 () {// 函数体} 使用function关键字表示定义一个构造函数 ...

  2. js中关于类及类继承

    在面向对象的程序设计语言中,类和类之间有显式的继承关系,一个类可以显式的指定继承了哪个类,子类将具有父类的所有属性和方法.js虽然也支持类.对象的概念,但没有继承的概念,只能通过特殊的手段来扩展原有的 ...

  3. 【JavaScript】js中的原型继承

    文章目录 1. 理解继承 2. js中的继承(原型继承) 3. js6种继承方式 3.1 原型链继承 3.2 盗用构造函数 3.3 组合继承 3.4 原型式继承 3.5 寄生式继承 3.6 寄生式组合 ...

  4. js中没有类怎么玩转面向对象

    这是一篇文笔幽默风趣的文章里面的用通俗易懂的方法写出了 为什么在js 中没有class类却可以完成继承 转载地址:http://www.cnblogs.com/aishangJava/p/723268 ...

  5. java 中普通类继承,抽象类继承,接口类继承,子类一定要重写父类中的方法吗

    一.简单总结,需要重写的有 普通类继承抽象类,重写所有抽象类方法:(不包括普通方法) 普通类继承接口,重写所有接口方法.(不包括default关键字修饰的方法) 详解见下: 普通类继承,并非一定要重写 ...

  6. JS中的类,类的继承方法

    大牛请无视此篇! 首先我们定义一个类,方法很简单,就像我们定义函数一样,只不过我们为了与函数区分,名称首字母要大写,看代码: function Person (){} 这就是一个很简单的Poson类, ...

  7. 关于js中的类式继承

    //父类 function Aa(){ this. name= "小名"; }; Aa. prototype. showName= function(){ return this. ...

  8. JS 中的类数组对象如何转换为数组?

    大家好,我是前端西瓜哥,今天说一下 JS 的类数组对象是什么,以及如何将类数组对象转为数组. 类数组对象是什么? 类数组对象,就是含有 length 属性的对象,但这个对象不是数组. 通常来说还会有 ...

  9. php 静态方法继承,php 5.2中的类继承:重写扩展类中的静态变量?

    我在Zend框架中对某些内容进行子类化时遇到了这个问题.我的决定是,在完全静止的土地上,你只有一个选择-重新定义继承类中的函数: class Animal { public static $color ...

最新文章

  1. Exchange Server 2013之邮件存档配置
  2. 桌面支持--电脑出现临时账户--解决办法
  3. javap(反汇编命令)详解
  4. git版本控制系统常用指令,Xmind笔记整理
  5. const在C与C++中的区别
  6. 好久没弄数学了,一本书上出现了,应该是指代了什么意思,问下.
  7. 【六】Jmeter:断言
  8. git的一些简单用法
  9. 【面向工业界】京东NLP算法工程师培养计划
  10. sqlserver2008R2下载安装教程
  11. 是的,我们真的在遭遇有史以来最大的DDoS攻击,并且还在加剧
  12. python架构师是做什么的_架构师的工作都干些什么?!想做架构师必看!
  13. 2022年最新google drive 谷歌云盘下载文件限额解决方法
  14. 20个你需要知道的JavaScript简写代码片段
  15. 双系统时间不一致问题
  16. 产品如何取得WFA的WiFi认证(二)成为WFA会员
  17. 详解 Java 日期与时间
  18. Android 输入法表情上传服务器
  19. 台式计算机硬盘英寸,台式电脑硬盘和笔记本电脑硬盘有区别吗?台式机硬盘报价一般是多少?...
  20. golang面经整理(一)(k8s,docker二次开发方向,云原生方向)

热门文章

  1. mysql删除数据太多卡死解决办法
  2. OpenStack、KVM、Docker——Docker之后还需要OpenStack吗?
  3. Webpack —— tree-starking 解析
  4. 关于mysql启动错误
  5. 演示FileInputStream案例演示
  6. Python 类继承,__bases__, __mro__, super
  7. 好用的ToolStripManager类
  8. 看下completablefuture(暂时没看完)
  9. hive的错误编码+解决方案汇总(持续更新中)
  10. Hive元数据信息表详解