JavaScript 快速入门
概述
本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能够对 JavaScript 有大体了解,并且满足 Cocos Creator 的开发需求。
JavaScript是一门充满争议的编程语言:它以 Java 命名,但实际上和 Java 毫无关系。JavaScript 的创造只用了10天时间,但在20年时间里却发展成世界上最流行的 Web 开发语言。如果为 JavaScript 今日的地位和流行程度找一个原因,那毫无疑问是容易上手的语言特性。当然,精通 JavaScript 是一项艰巨的任务,但学会足够开发 Web 应用和游戏的知识却很简单,如果你已经有了一定编程基础,熟悉 JavaScript 语言特性不会花费你多长时间。
另外,在使用 Cocos Creator 开发游戏时你大多数情况下都会重复使用一些固有的模式。根据帕雷托法则(也叫二八定律),掌握一门语言的20%就足够你应付80%以上的情况了。现在就让我们来花最短的时间学习足够的 JavaScript 知识,以便我们开始使用 Cocos Creator 开发游戏。
边读边尝试
如果你能看到这篇文章,那么你已经具备了全功能的 JavaScript 开发环境——我说的就是你正在使用的浏览器!
在本页面中读到的所有例子,你都可以把他们输入到浏览器的控制台里并查看运行结果,如果你不清楚怎么做,可以阅读如何在不同浏览器中打开控制台的指南。
准备好了吗?让我们开始学习 JavaScript 吧!
变量
在 JavaScript 中,我们像这样声明一个变量:
var a;
保留字var
之后紧跟着的,就是一个变量名,接下来我们可以为变量赋值:
var a = 12;
在阅读其他人的 JavaScript 代码时,你也会看到下面这样的变量声明:
a = 如果你在浏览器控制台中尝试,会发现 JavaScript 在面对省略var
时的变量声明并不会报错,但在 Cocos Creator 项目脚本中,声明变量时的var
是不能省略的,否则编译器会报错。
函数
在 JavaScript 里我们像这样声明函数:
var myAwesomeFunction = function (myArgument) {
// do something
}
myAwesomeFunction(something);
我们看到函数声明也和变量声明一样遵从var something = somethingElse
的模式。因为在 JavaScript 里,函数和变量本质上是一样的,我们可以像下面这样把一个函数当做参数传入另一个函数中:
square = function (a) {
return a * a;
}
applyOperation = function (f,a) {
return f(a);
}
applyOperation (square,10); // 100
返回值
函数的返回值是由return
打头的语句定义的,我们这里要了解的是函数体内return
语句之后的内容是不会被执行的。
myFunction = function (a) {
return a * 3;
explodeComputer(); // will never get executed (hopefully!)
}
If
JavaScript 中条件判断语句if
是这样用的:
if (foo) {
return bar;
}
If/Else
if
后的值如果为 false,会执行else
中的语句:
if (foo) {
function1();
}
else {
function2();
}
If/Else 条件判断还可以像这样写成一行:
foo ? function1() : function2();
当foo
的值为 true 时,表达式会返回function1()
的执行结果,反之会返回function2()
的执行结果。当我们需要根据条件来为变量赋值时,这种写法就非常方便:
var n = foo ? 1 : 2;
上面的语句可以表述为“当foo
是 true 时,将n
的值赋为1,否则赋为2”。
当然我们还可以使用else if
来处理更多的判断类型:
if (foo) {
function1();
}
else if (bar) {
function2();
}
else {
function3();
}
JavaScript 数组(Array)
JavaScript 里像这样声明数组:
a = [123,128)">456
,128)">789];
像这样访问数组中的成员:(从0开始索引)
a[1]; // 456
JavaScript 对象(Object)
我们像这样声明一个对象(object):
myProfile = {
name: "Jare Guo",email: "blabla@gmail.com",'zip code': 12345,isInvited: true
}
在对象声明的语法(myProfile = {...}
)之中,有一组用逗号相隔的键值对。每一对都包括一个 key(字符串类型,有时候会用双引号包裹)和一个 value(可以是任何类型:包括 string,number,boolean,变量名,数组,对象甚至是函数)。我们管这样的一对键值叫做对象的属性(property),key 是属性名,value 是属性值。
你可以在 value 中嵌套其他对象,或者由一组对象组成的数组:
"Xiamen",points: 1234,isInvited: true,friends: [
{
name: "Johnny",68)">"blablabla@gmail.com"
},{
name: "Nantas",68)">"piapiapia@gmail.com"
}
]
}
访问对象的某个属性非常简单,我们只要使用 dot 语法就可以了,还可以和数组成员的访问结合起来:
myProfile.name; // Jare Guo
myProfile.friends[1].name; // Nantas
JavaScript 中的对象无处不在,在函数的参数传递中也会大量使用,比如在 Cocos Creator 中,我们就可以像这样定义 FireClass 对象:
var MyComponent = cc.Class({
extends: cc.Component
});
{extends: cc.Component}这就是一个用做函数参数的对象。在 JavaScript 中大多数情况我们使用对象时都不一定要为他命名,很可能会像这样直接使用。
匿名函数
我们之前试过了用变量声明的语法来定义函数:
myFunction = function (myArgument) {
再复习一下将函数作为参数传入其他函数调用中的用法:
return
f(a);
}
applyOperation(square,136); font-style:italic">// 100
我们还见识了 JavaScript 的语法是多么喜欢偷懒,所以我们就可以用这样的方式代替上面的多个函数声明:
applyOperation = function (f,a) {
return f(a);
}
applyOperation(
function(a){
return a*a;
},128)">10
) 我们这次并没有声明square
函数,并将square
作为参数传递,而是在参数的位置直接写了一个新的函数体,这样的做法被称为匿名函数,在 JavaScript 中是最为广泛使用的模式。
链式语法
下面我们介绍一种在数组和字符串操作中常用的语法:
var myArray = [456];
myArray.push(789) // 123,456,789
var myString = "abcdef";
myString.replace("a",68)">"z"
); // "zbcdef"
上面代码中的点符号表示“调用myString
字符串对象的replace
函数,并且传递a
和z
作为参数,然后获得返回值”。
使用点符号的表达式,最大的优点是你可以把多项任务链接在一个表达式里,当然前提是每个调用的函数必须有合适的返回值。我们不会过多介绍如何定义可链接的函数,但是使用他们是非常简单的,只要使用以下的模式:something.function1().function2().function3()
链条中的每个环节都会接到一个初始值,调用一个函数,然后把函数执行结果传递到下一环节:
var n = 5;
n.double().square(); //100
This
this可能是 JavaScript 中最难以理解和掌握的概念了。
简单地说,this
关键字能让你访问正在处理的对象:就像变色龙一样,this
也会随着执行环境的变化而变化。
解释this
的原理是很复杂的,不妨让我们使用两种工具来帮助我们在实践中理解this
的值:
首先是最普通又最常用的console.log()
,它能够将对象的信息输出到浏览器的控制台里。在每个函数体开始的地方加入一个console.log()
,确保我们了解当时运行环境下正在处理的对象是什么。
myFunction = function (a,b) {
console.log(this);
另外一个方法是将this
赋值给另外一个变量:
var
myObject = this;
乍一看好像这样子并没有什么作用,实际上它允许你安全的使用myObject
这个变量来指代最初执行函数的对象,而不用担心在后面的代码中this
会变成其他东西。
运算符
=是赋值运算符,a = 12
表示把 “12” 赋值给变量a
。
如果你需要比较两个值,可以使用==
,例如a == 12
。
JavaScript 中还有个独特的===
运算符,它能够比较两边的值和类型是否全都相同。(类型是指 string,number 这些):
a = "12";
a == 12; // true
a === // false
大多数情况下,我们都推荐使用===
运算符来比较两个值,因为希望比较两个不同类型但有着相同值的情况是比较少见的。
下面是 JavaScript 判断两个值是否不相等的比较运算符:
a = 12;
a !== 11; // true
!运算符还可以单独使用,用来对一个 boolean 值取反:
a = true;
!a; !运算符总会得到一个 boolean 类型的值,所以可以用来将非 boolean 类型的值转为 boolean 类型:
12
;
!a; // false
!!a; 或者:
0
;
!a; // true
!!a; // false
代码风格
最后,下面这些代码风格上的规则能帮助我们写出更清晰明确的代码:
- 使用驼峰命名法:定义
myRandomVariable
这样的变量名,而不是my_random_variable
- 在每一行结束时写一个
;
,尽管在 JavaScript 里行尾的;
是可以忽略的
- 在每个关键字前后都加上空格,如
a = b + 1
,而不是a=b+1
组合我们学到的知识
以上基础的 JavaScript 语法知识已经介绍完了,下面我们来看看能否理解实际的 Cocos Creator 脚本代码:
var Comp = cc.Class({
extends: cc.Component,properties: {
target: {
default: null,type: cc.Entity
}
},onStart: function () {
this.target = cc.Entity.find('/Main Player/Bip/Head');
},update: function () {
this.transform.worldPosition = this.target.transform.worldPosition;
}
});
这段代码向引擎定义了一个新组件,这个组件具有一个target
参数,在运行时会初始化为指定的对象,并且在运行的过程中每一帧都将自己设置成和target
相同的坐标。
让我们分别看下每一句的作用(我会高亮有用的语法模式):
var Comp = cc.Class({:这里我们使用cc
这个对象,通过点语法来调用对象的Class()
方法(该方法是cc
对象的一个属性),调用时传递的参数是一个匿名的JavaScript 对象({}
)。
target: { default: null,type: cc.Entity }:这个键值对声明了一个名为target
的属性,值是另一个 JavaScript 匿名对象。这个对象定义了 target 的默认值和值类型。
extends: cc.Component:这个键值对声明这个 Class 的父类是 cc.Component。cc.Component 是 Cocos Creator 的内置类型。
onStart: function () {:这一对键值定义了一个成员方法,叫做onStart
,他的值是一个匿名函数。
this.target = cc.Entity.find(':在这一句的上下文中,this
表示正在被创建的 Component 组件,这里通过this.target
来访问target
属性。
继续学习
这篇简短的教程从任何角度上说都无法代替系统的 JavaScript 学习,但这里介绍的几种语法模式已经能够帮助你理解绝大部分 Cocos Creator 文档和教程中的代码了,至少从语法上完全可以理解。
如果你像我一样喜欢通过实践学习,那么现在就可以开始跟随教程和文档学习在 Cocos Creator 中开发游戏了!
JavaScript Resources
以下是 JavaScript 的一些入门教程: