Swift51.com
麦子学院 头像
麦子学院  2017-10-10 08:31

在 JavaScript 中使用构造器函数模拟类

回复:0  查看:3243  

本文和大家分享的是在 JavaScript 中使用构造器函数(construcor function)模拟类相关内容,一起来看看吧,希望对大家学习javascript有所帮助。

  构造器函数简介

  你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统的构造器函数来模拟类,因为这样可以给人一种你是个 JavaScript 老手的错觉,哈哈!

  什么是构造器函数?构造器函数是编写对象的方法之一。一般情况下,你可以这样编写一个对象:

  var obj = { a:1, b:2 };

  但也可以使用构造器函数来编写对象:

  function Obj(a, b){

  this.a = a;

  this.b = b;

  }

  var obj = new Obj(1, 2); //obj 等价于 { a:1, b:2 }

  使用构造器函数的好处在于可以传递参数。构造器函数通常首字母大写,而且需要使用 new 关键词来调用。在 JavaScript 中是没有类的,利用构造器函数我们可以模拟一个类。

  使用构造器函数编写栈类

  了解了构造器函数,我们使用它编写一个迷你的栈类,下面就是实现代码:

  Stack.js

  function Stack() {

  // 私有变量 items,用于记录数组,对象不能直接操作

  var items = [];

  // 类方法 push,在数组末尾添加项,对象可以直接调用

  this.push = function (element) {

  items.push(element);

  };

  // 删除并返回数组末尾的项

  this.pop = function () {

  return items.pop();

  };

  }

  上述栈类中,有个私有变量 items ,为何它就不能直接操作呢?为何挂在 this 上的方法可以直接调用?因为 new 操作符会将构造器函数中的 this 指向生成的对象 ,也就是说挂在 this 上的方法或属性将来会成为生成对象的方法或属性,所以可以直接调用。而 items 则是函数内部的一个局部变量,它在函数外部是不可见的 ,生成对象只能通过调用自身的方法,沿着作用域链来操作 items 

  var stack = new Stack();

  // stack 对象不能直接操作items,结果是 undefined

  console.log(stack.items)

  // stack 对象可以直接操作构造器函数中挂在 this 上的属性和方法stack.push(1);// 打印了1

  console.log(stack.pop())

  如果你不熟悉 JavaScript ,那么你应该先学习一下 JavaScript 作用域、this 和 new 操作符的相关知识。

 

 

来源:博客园