• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JavaScript类与封装

JavaScript类与封装

作者:a1396531115的博客 字体:[增加 减小] 来源:互联网 时间:2017-09-02

a1396531115的博客通过本文主要向大家介绍了javascript等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

1.JavaScript类

类与面向对象编程密不可分,面向对象编程就是将需求抽象成一个对象(类),然后针对这个对象分析其特征(属性)与动作(方法)。它的一个特点就是封装,即把需要的功能放在一个对象里。
如何在JavaScript中创建一个类?

1.ES5


首先声明一个函数保存在一个变量里,然后在这个函数(这个函数就可以称为类)的内部通过对this变量添加属性名或者方法来实现对类添加属性或者方法

 

var Book = function(id, bookname, price){
    this.id = id; 
    this.bookname = bookname;
    this.price = price; 
} 

以上创建了一个类Book(类名首字母大写),这种创建类的方式也叫构造函数模式。也可以在类的原型上添加属性和方法,有两种方式

Book.prototype.display = function(){}; 
Book.prototype = {
    display: function(){} 
};

这样我们就可以将需要的方法和属性都封装在Book类里面了,当我们调用此方法时,需要使用New关键字以实例化新的对象

var newBook = new Book(10, "JavaScript", 50);console.log(newBook.bookname);      //JavaScript 

通过new关键字实例化对象其实经历了一个简要的内部步骤:首先创建一个新对象newBook,然后将构造函数Book的作用域赋值给它,因此this就指向Book,最后再执行各种想要的方法。 那么我们再来分析以下代码

Book(10, "JavaScript", 50);//如何调用?window.id;       //10  

从上面的结果我们可以分析得到:当调用Book构造函数时,没有将其赋值给新对象,故this指向的作用域就是全局作用域,我们就可以通过window对象调用Book构造函数里面的方法了。

2.ES6


ES6中引入了Class(类)的概念,通过class关键字,极大地方便了类的创建与使用,将上述在原型中添加属性的代码用class改写如下

 

class Book{
    constructor(id, bookname, price){
    this.id = id;
    this.bookname = bookname;
    this.price = price;
}
display(){
    //...
}}
//等价于
var Book = function(id, bookname, price){
this.id = id;
this.bookname = bookname;
this.price = price;}; 
Book.prototype = {
    display: function(){} 
};

class省略了function的书写。
最后再来看看通过点语法在函数内部添加属性与通过prototype创建属性的区别
在函数内部通过点语法添加属性,当使用new操作符创建新的Book实例时,相应的this指向这个新的实例,所以id和bookname等这些内部方法也会被创建,也就是说每定义一个函数,就实例化了一个对象,每个方法在每个实例上重新创建了一遍,通过prototype每次创建一个新对象时这些属性和方法不会被重新创建。

2.封装


函数内部作用域在外部环境是不能访问内部作用域中的私有属性和私有方法,而通过this创建的方法或属性在外部环境却能访问到,故this定义的这些方法或属性称为共(公)有属性和共(公)有方法,统称为特权方法。

 

var Book = function(id, name, price){
var num = 1;                   //私有属性
function checkId(){};          //私有方法
this.getName = function(){};   //特权方法
this.id = id;                  //对象公有属性
this.setName(name);
this.setPrice(price);          //构造器} 

在通过new关键字实例化对象时,通过this定义的方法能被访问到,但是上述代码中的私有属性却不能访问,这是因为实例化对象将作用域移到了外部实例对象,通过外部不能访问到内部的私有属性,而this定义的方法会将此方法的作用域指向实例化的对象。
那么如果方法是通过点语法或者原型模式创建,外部能否访问到这些方法呢?

Book.isChinese = true;Book.resetTime = function(){
    console.log('new time')
}; 
Book.prototype = {
    jsJSBook : false,
    display: function(){}  
} 

当使用new关键字创建新的对象时,在类外面通过点语法添加的属性和方法并没有被执行到,所以新的对象无法被获取,在类外通过点语法定义的属性叫静态共有属性,定义的方法叫静态共有方法;通过原型prototype定义的属性和方法分别叫公有属性和公有方法,因为新对象的原型prototypr和Book类的的原型prototype指向同一个对象,即Book.prototype.isPrototypeof(newBook),所以创建的新的对象能访问到在类的外部通过原型创建的公有属性和公有方法。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11学习使用jQuery表单验证插件和日历插件
  • 2017-05-11JavaScript利用Date实现简单的倒计时实例
  • 2017-05-11js实现将json数组显示前台table中
  • 2017-05-11ionic中列表项增加和删除的实现方法
  • 2017-05-11Vue form 表单提交+ajax异步请求+分页效果
  • 2017-05-11js上下视差滚动简单实现代码
  • 2017-05-11微信小程序 http请求封装详解及实例代码
  • 2017-05-11详解在Angularjs中ui-sref和$state.go如何传递参数
  • 2017-05-11JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
  • 2017-05-11JavaScript中的工厂函数(推荐)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
    • 微信小程序商城项目之商品属性分类(4)
    • flexslider.js实现移动端轮播
    • jQuery简单实现MD5加密的方法
    • 微信小程序 连续旋转动画(this.animation.rotate)详解
    • jquery简单获取文档滑动的高度
    • jquery实现input框获取焦点的简单实例
    • jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
    • AngularJS中$http使用的简单介绍
    • js遍历获取表格内数据的方法(必看)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有