原始类型和引用类型

2016-05-12

一.原始类型（基本数据类型）

Ⅰ.说明：

1.基本数据类型的变量直接保存原始值（而不是一个指向对象的指针）。
2.鉴别原始数据类型的最佳方法是：typeof操作符。
3.原始类型具有原始方法（除null和undefined外），如:

1
2
3
4
5
6
7
8
9
10
11
var name = 'Cooling';
var lowercaseName = name.toLowerCase();//全部转换成小写字母
var firstLetter = name.charAt(0);//获得第一个字母C
var middleOfName = name.substring(2,5);//活动字母2-4

var count = 10;
var fixedCount = count.toFixed(2);//10.00
var hexCount = count.toString(16);//a

var flag = true;
var stringFlag = flag.toString();//"true"(字符串形式)

Ⅱ.undefined：

也只有一个值：undefined。
对尚未定义的变量，以及尚未声明的变量使用typeof，结果都是undefined。

但是注意：

Read More

利用Canvas和JavaScript实现五子棋

2016-05-10

主要技术：canvas绘制棋盘(UI)，JavaScript实现相关算法(AI)。在学习并实现五子棋功能的过程中，自己最初对算法不是特别了解，最后通过在纸上写写画画踩完了各处难点，终于完成了它的功能。感触颇多，故写篇文档分享。一来服务大众，二来加深自己理解。

一、canvas绘制棋盘(UI)和实现落子

1.绘制棋盘

这是在HTML中初始化canvas：

1
<canvas id="chess" width="450px" height="450px"></canvas>

其CSS样式：

1
2
3
4
5
6
7
8
<style type="text/css">
		canvas{
			display: block;
			/*只有块级元素才可以使用下面的居中属性*/
			margin: 50px auto;
			box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
		}
</style>

①开始绘制棋盘：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var chess = document.getElementById('chess');
var context = chess.getContext('2d');//这两句就不解释了。

var chessBoard = new Array();//定义一个数组（这里是二维的），用于保存每个位置的落子情况。
for (var i = 0; i < 15; i++) {
	chessBoard[i] = [];
	for (var j = 0; j < 15; j++) {
		chessBoard[i][j] = 0;//初始化，将棋盘所有落子位置都设置成0。
	}
}
//这里的canvas大小是450x450，棋盘按线划分规格是15+14*30+15，drawChessBoard()就完成了棋盘网格的绘制。
function drawChessBoard(){
	for (var i = 0; i < 15; i++) {
		context.moveTo(15+ i * 30,15);
		context.lineTo(15+ i * 30,435);
		context.moveTo(15,15+ i * 30);
		context.lineTo(435,15+ i * 30);
	}
	context.lineWidth = 2;
	context.strokeStyle = "#ACACAC";
	context.stroke();
}

Read More

JavaScript精要之函数

2016-04-29

1.函数的本质
JavaScript中，函数其实就是对象，使函数不同于其他对象的决定性特点就是函数存在一个[[call]]的内部属性。内部属性无法通过代码访问，而是定义了代码执行时的行为。（JavaScript的对象定义了多种内部属性，这种属性都用双重中括号括起来，比如[[Prototype]]）。正是有了这样的一个[[call]]属性，所以typeof在解读时，把函数解读为function。

2.函数的提升
我们都知道，定义一个函数，既可以使用函数声明，也可以使用函数表达式，或者是使用构造函数方式。值得注意的是，函数声明会被提升至上下文！

1
2
3
4
var result = add(5,5);//10
function add(num1,num2){
	return num1 + num2;
}

JavaScript会将函数声明提升至顶部来执行，使得它就如同下面这代码一样：

1
2
3
4
function add(num1,num2){
	return num1 + num2;
}
var result = add(5,5);

但是，值得注意的是，函数表达式，或者构造函数必须得在函数定义后调用函数，下面这就是错的：

1
2
3
4
var result = add(5,5);
var add = function(num1,num2){
	return num1 + num2;
};

3.函数就是值！
eg1.函数可以将他们赋给变量：

Read More

JavaScript精要之原始类型和引用类型

2016-04-28

概念理解：
原始值：原始类型变量中的值
引用值：就是对象，或者交做实例。

原始值被直接保存在变量的对象内，引用值则作为一个指针保存在变量对象内，该指针指向实际对象在内存中的存储位置。

创建对象：

1
var object = new Object();

注意：因为引用类型不在变量中直接保存对象，所以，这里的object变量实际上并不包含对象的实例。这里的object是一个指向内存中实际对象所在位置的指针。这里的object的正确名称，应该叫被创建对象的引用！！！！

原始类型具有的原始方法（总结）：

1
2
3
4
5
6
7
8
9
10
11
var name = "Cooling";
var lowercasename = name.toLowerCase();//转化为小写
var firstLetter = name.charAt(0);//得到C
var middleOfName = name.substring(2,5);//得到2-4的字符

var count = 10;
var fixedCount = count.toFixed(2);//10.00
var hexCount = count.toString(16);//转化为16进制a

var flag = true;
var stringFlag = flag.toString;//转换为字符串"true"

Read More

JavaScript中创建对象的方法

2016-04-27

1.最简单的方法就是创建一个Object实例，然后为其添加属性和方法：（缺点：使用同一个接口创建很多对象，会产生大量的代码）

1
2
3
4
5
6
7
var person = new Object();
person.name = "cooling";
person.age = 20;
person.job = "Web Engineer";
person.sayName() = function(){
	alert(this.name);
};//注意这里有分号

2.对象字面量语法：（缺点：使用同一个接口创建很多对象，会产生大量的代码）

注意和上面的区别：用“，”号分隔，用的是“:”号赋值。

1
2
3
4
5
6
7
8
var person = {
	name : "cooling",//注意这里是逗号
	age : 20,
	job : "Web Engineer",
	sayName : function(){
		alert(this.name);
	}
};

3.工厂模式：

1
2
3
4
5
6
7
8
9
10
11
12
function createPerson(name,age,job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	};
	return o;
}
var person1 = createPerson('cooling1',20,'Web Engineer');
var person2 = createPerson('cooling2',23,'Web Engineer');

4.构造函数模式：

注意：这里可是构造函数法的详细用法！像Object和Array这样的原生构造函数，在运行时，会自动出现在执行的环境中。此外也可以创建自定义的构造函数，从而定义自定义对象类型的属性和方法。按照惯例，构造函数的首字母都应该大写，非构造函数用小写。

Read More

JavaScript的一些细节知识总结

2016-04-26

一、函数的定义方式：

说法一：JavaScript提供两种函数的定义方式，一种是有返回值，一种是没有返回值（这种函数有时叫做子程或void函数）。

1.有返回值的：

1
2
3
4
5
6
7
8
9
10
function factorial(num){
	var product = 1;
	for (var i = 0; i < num; i++) {
		product *= num;
	}
	return product;
}
print(factorial(4));//24
print(factorial(5));//120
print(factorial(10));//3628800

2.无返回值的：

1
2
3
4
5
6
7
8
function curve(arr, amount){
	for (var i = 0; i < arr.length; i++) {
		arr[i] += amount;
	}
}
var grades = [80,83,74,71,90];
curve(grades,5);
print(grades);//85,88.79,76,95

说法二：函数声明、函数表达式、Function()构造函数三种方法来定义。

1.函数声明：

Read More