Tag Archives: javascript

Javascript学习笔记(四)

导论

Javascript是一门面向对象的编程语言,面向对象的思想贯穿整个Javascript语言,所以了解对象是什么是很重要的。

面向对象编程(Object Oriented Programming,缩写为OOP)是将真实世界中的各种复杂的关系,抽象为一个个的对象,然后由对象之间的分工合作完成对真实世界的模拟。

每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。对象可以复用,通过继承机制还可以定制。因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(procedural programming),更适合多人合作的大型软件项目。

对象是单个实物的抽象

可以将对象想象为一个人、一辆车、一个网页、一个数据库等等,当实物被抽象为对象后,实物之间的关系就变成了对象和对象之间的关系,从而就可以模拟现实的情况,针对对象进行编程。

而对象也是一个容器,封装了各种属性、方法用于处理不同的事情,设置不同的属性,可以将这些属性想象为人的身高、体重,皮肤颜色,而方法则可以想象人的技能,如开车、打篮球、绘画等。

而继承,你可以想象为孩子,孩子会遗传一部分父亲母亲的颜色、单眼皮等,而在对象中也是如此,继承对象会继承一些父对象的方法、属性。

构造函数

面向对象的第一步就是生成对象,对象是一个个实物的单个抽象,而生成一个对象实例则需要一个模板来表示一类对象,比如人、猪、猫等都是单独的模版,在Javascript,这个模板就是构造函数,而继承则是原型。

典型的面相对象编程的语言C++和Java等,都有类的概念,所谓的类就是对象一个模版,对象就是类的实例,但是在Javascript中的对象不是基于类,而是基于构造函数(constrcutor)和原形(prototype)。

Javascript语言中的构造函数则是对象的模板,而构造函数则是专门用来生成实例对象的函数,而每个构造函数可以生成多个对象实例,而这个构造函数则定义了这一类对象的基础属性和方法。

构造函数和普通函数定义没有什么区别,包括函数名也同样遵守表示符的定义,所以为了区分构造函数与普通函数的区别,所以一般构造函数的一个字母都是大写,即普通函数user,而构造函数为User

构造函数还有两个特征:

  • 构造函数内部使用了this关键字,用来代表将要生成的对象实例
  • 生成对象的时候,必须使用new操作符,如果没有new操作符就是普通的函数调用

下面定义了一个很简单的构造函数,名为Js

function Js () {
    this.name = 'Javascript';
}

Continue reading

Javascript学习笔记(二)

Javascript导论

什么是Javascript?

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。

JavaScript 也是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多,只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O(输入/输出)相关的 API,都要靠宿主环境(host)提供,所以 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。

目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。

JavaScript 的核心语法部分相当精简,只包括两个部分:基本的语法构造(比如操作符、控制结构、语句)和标准库(就是一系列具有各种功能的对象比如Array、Date、Math等)。除此之外,各种宿主环境提供额外的 API(即只能在该环境使用的接口),以便 JavaScript 调用。

本文档主要针对ECMAScript5.1进行记录的。

如何运行Javascript?

只要电脑安装了浏览器,就可以用来实验了。读者可以一边读一边运行示例,加深理解。

推荐安装 Chrome 浏览器,它的“开发者工具”(Developer Tools)里面的“控制台”(console),就是运行 JavaScript 代码的理想环境。

进入 Chrome 浏览器的“控制台”,有两种方法。

  • 直接进入:按下Option + Command + J(Mac)或者Ctrl + Shift + J(Windows / Linux)
  • 开发者工具进入:开发者工具的快捷键是 F12,或者Option + Command + I(Mac)以及Ctrl + Shift + I(Windows / Linux),然后选择 Console 面板

进入控制台以后,就可以在提示符后输入代码,然后按Enter键,代码就会执行。如果按Shift + Enter键,就是代码换行,不会触发执行。建议阅读本教程时,将代码复制到控制台进行实验。

作为尝试,你可以将下面的程序复制到“控制台”,按下回车后,就可以看到运行结果。

function greetMe(yourName) {
  console.log('Hello ' + yourName);
}

greetMe('World')
// Hello World

Continue reading

Javascript学习笔记(一)

基本语法

语句和表达式

Javascript程序的执行单位为行,一般情况下,每一行都是一条语句,执行的顺序也是按照一行一行的执行。

语句是为了完成某个任务而进行的操作,声明一个变量

var a;

而表达式指的是为了得到返回值的计算式

3 * 7

语句和表达式的区别主要在于表达式是为了得到返回值,而语句是为了执行某项操作。

语句以分号结尾,表达式不需要分号结尾

var a;  //语句

3 * 7  //表达式

分号前面可以没有任何内容,Javascript引擎将视为空语句,但这是没有任何意义的。

;;; //三个空语句

分号在Javascript中是可选的,但是建议语句总以分号结尾,因为Javascript引擎可能猜错语句的结尾。

注释

Javascript有两种注释,一种是单行注释,一种是多行注释,单行注释以//开始后面截止这行为止都为注释部分,多行注释是以/*开始到*/结束,中间所有的内容均为注释

// 这是单行注释


/*
这是
多
行
注释
*/

由于历史上 JavaScript 可以兼容 HTML 代码的注释,所以也被视为合法的单行注释。

var a; <!-- 注释 -->

Continue reading

ES6-Class类

书籍参考:《ECMAScript 6入门》 作者:阮一峰
文档参考:MDN

概念

ES6提供了Class语句用于更的理解语义以及更接近传统的编程语言的写法。Class可以当作ES5构造函数的一个语法糖。
传统的构造函数以及继承方法如下面这样来写的:

function Getname() {
    this.name = 'wyz';
    this.age = '29';
}
// 如果我们需要定义一个给所有基于Getname构造函数使用的方法
// 那么我们必须通过prototype对象上定义
Getname.prototype.getName = function(){
    return (`Name: {this.name}, Age:{this.age}`);
}
let gname = new Getname();
gname.getName(); //"Name: wyz, Age: 29"

Continue reading

es6-promise

书籍参考:《ECMAScript 6入门》 作者:阮一峰
文档参考:MDN

概念

Promise最初在社区提出的一个异步解决的方案,最后ES6将它加入了正式的标准,并规定了统一的写法。
在使用Promise之前,你需要注意下面几个点:
1.Promise有三个状态:Pending(进行中)Resolved(已完成)Rejected(已失败),这三个状态我们无法去改变,并且在一个Promise中只有两个可能,一种是从PendingResolved,另一种是PendingRejected。当结果发生后,这个状态就凝固了,也就是说我们无法去改变Promise对象的任何状态,如果再次调用这个Promise对象,返回的将是凝固状态的结果。
2.Promise在执行的过程中无法取消,并且我们也无法知道它执行到哪一步,我们只能知道返回的是已完成还是已失败。
3.Promise实例创建后会立即执行
下面的代码部署了一个Promise对象异步加载图片的例子,可以看到用Promise对象来编写异步代码是非常的清晰。
Continue reading

ES6-iterator遍历接口

书籍参考:《ECMAScript 6入门》 作者:阮一峰

Iterator概念

ES6发布后Javascript的数据集合对象有ArrayObjectMapSet四种,我们同时知道在Array中,我们可以放对象,Object中我们一样可以放Array,四种数据集合对象都可以相互交叉使用。
那么问题来了,如果在一个数据集合对象中含有多个不同数据集合对象的类型,那么这时候就需要一种接口的机制,来处理不同的数据集合了。
Iterator有三个作用:

  1. 为各种数据接口提供一个统一的访问接口
  2. 使数据接口的成员能够按照某种次序排序
  3. ES6新遍历名利 for…of循环

按照《ECMAScript 6入门》这本书中的4个步骤就能很好的解释Iterator遍历过程

  1. 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

  4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。

用一个代码段来实现上面的4个点,也就是来实现一个Iterator遍历器
Continue reading

ES6箭头函数

参考:《ES6标准入门教程》 作者:阮一峰
在ES6中允许了一种新函数方式“箭头函数”,它大概的如下:

var a = (x) => x;
等同
var a = function(x){
    return x;
}

如果不需要参数,使用一个空括号代表就可以了

var a = () => 1;
等同
var a = function() {
    return 1;
}

如果箭头函数需要在返回之前进行一些逻辑操作,那么需要添加大括号{},并显示的声明return语句,如果没有return语句那么返回的是一个undefined:
Continue reading