Javascript 初学笔记

变量作用域

自 ES2015 起，JS 引入let 和 const 关键词定义变量的块作用域（Block Scope）。

var 仅支持全局作用域（Global Scope）和函数作用域（Function Scope）；

let 支持块作用域，即严格定义作用域在花括号{}里面；

counst 不仅支持块作用域，且定义的变量无法再修改。

var i = 5;
for (var i = 0; i < 10; i++) {
	// some statements
}
// Here i is 10

let i = 5;
for (let i = 0; i < 10; i++) {
	// some statements
}
// Here i is 5

[更多]

---

循环操作

for 循环

C 风格

for (let i = 0; i < arr.length; i++) {
	// do iteration
}

JS 风格

for (let val of arr) {
	// loop over values of array
}

for (let key in obj) {
	// loop over keys of object
}

对象（Object）

创建新对象的四种方式

Object Initializer

let brother = {
	name: 'Alex',
	age: 25,
	sayHello: function () {
		return 'Hello!' + 'my name is' + this.name;
	}
}

Constructor function

function Person (name, age, gender) {
	this.name = name;
	this.gender = gender;
	this.age = age;
	sayHello: function () {
		return 'Hello!' + 'my name is' + this.name;
	}
}
let brother = new Person('Alex', 25, 'male');

Object Constructor

let brother = new Object({
	name: 'Alex',
	gender: 'male'
	age: 25,
	sayHello: function () {
		return 'Hello!' + 'my name is' + this.name;
	}
})

Object.create() method

let brother = {
	name: 'Alex',
	gender: 'male'
	age: 25,
	sayHello: function () {
		return 'Hello!' + 'my name is' + this.name;
	}
}
let sister = Object.create(brother);
sister.name = 'Alice';
sister.gender = 'female'

补充：

sister = Object.create(brother) 在这里实际上是以 brother 作为原型构建的，亦即：

sister.__proto__ === brother

将返回 true。

---

对象原型（Object Prototype）

我们刚刚创建的brother 对象的 constructor 是 Person()，而 Person() 的原型是 Object()。如果我们运行：

brother.valueOf();

将列出 brother 中所有的属性和方法。但是，Person() 中并没有 valueOf() 方法，因此可以看出实际上 Person() 实际上继承了 Object() 中的方法 valueOf()。

访问对象原型

目前主流浏览器都支持：

brother.__proto__;

自 ECMAScript 2015 开始，也可以：

Object.getPrototypeOf(brother);

可继承成员

每个对象都有个属性 prototype， 例如 Object.prototype，Person.prototype。

Object.prototype 本身是一个对象，里面是 Object 的所有可继承成员。换句话说，prototype 里面不包含的成员是无法继承的。

修改原型

增加属性

我们可以直接给对象 bother 添加属性

brother.education = 'Bachelor of Computer Science';

也可以给对象原型 Person 添加属性

Person.prototype.nationality = 'Chinese'

增加方法

我们可以直接给对象 bother 添加方法

brother.coding = function(){
	return '0 warning(s), 0 error(s)';
};

也可以给对象原型 Person 添加属性

Person.prototype.play = function(){
	return 'Happy';
};

Reference

---

原型继承（Prototype Inheritance）

现在，假设我们想从 Person 构建一个 Student 子类。

Constructor function

首先需要构造函数（constructor function）：

function Student(name, age, gender, degree) {
	Person.call(this, name, age, gender);
	this.degree = 'Undergraduate';
}

Prototype & Constructor Reference

此时，构造函数 Student() 的原型属性（prototype property）Student.prototype 并不具有 Person 里带有的方法， 因此还需要继承 Person 的方法。

例如， sayHello() 是Person 的方法，却不在 Student.prototype 中。

修改原型

Student.prototype = Object.create(Person.prototype)

以 Person.prototype 为原型构建对象并赋给 Student.prototype 就可以继承到 Person 的方法了。

恢复构造函数

但仅仅这样会造成另一个问题。由于 Student.prototype === Person.prototype，造成了 Student.prototype.constructor === Person.prototype.constructor。因此需要将 Student 的构造函数恢复成 Student 而不是 Person。

Student.prototype.constructor = Student

这样，继承就完成了。

Reference

Pipeline

const  pipe  = (f1, f2) => {
	return (arg) => {
		const  result1  =  f1(arg);
		return  f2(result1);
	}
}
let  timesTwo  = (a) =>  a*2;
let  timesThree  = (a) =>  a*3;
const  pipeline  =  pipe(timesTwo, timesThree);
console.log(`$6 x 2 x 3 = ${pipeline(6)}`);

Reference

---

JS String

字符串转数字

Number(string);
parseInt(string);
parseFloat(string);

字符串截取

string.charAt(index);
string.indexOf("foo");
string.lastIndexOf("foo")
string.match("pattern");
string.replace(/regex/, "foo");
string.slice(start, end);
string.substring(start, end);
string.substr(start, length);

字符串转数字

let number = Number(string);
let intNum = parseInt(string);
let floatNum = parseFloat(string);

Reference

---

Written with StackEdit.