变量作用域

自 ES2015 起,JS 引入letconst 关键词定义变量的块作用域(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.prototypePerson.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.

Javascript 初学笔记的更多相关文章

  1. javascript初学笔记

    基本语句 赋值条件循环语句 javascript异常处理语句 trycatchfinally语句 Error对象 throw语句 函数 定义 调用 嵌套函数 函数的嵌套定义 内置函数 匿名函数和Fun ...

  2. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  3. C++ STL初学笔记

    C++  STL初学笔记 更系统的版本见徐本柱的PPT set 在这儿:http://www.cnblogs.com/pdev/p/4035020.html #include <vector&g ...

  4. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  5. JavaScript基础笔记一

    一.真假判断 真的:true.非零数字.非空字符串.非空对象 假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...

  6. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  7. javascript - 工作笔记 (事件四)

    在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装,  JavaScript Code  12345   yx.bind(item, "click&quo ...

  8. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

随机推荐

  1. 【Javascript-基础-ecma6】ecma6学习笔记(持续更新)

    makdown语法手册API String 新特性的方法 基本不支持IE浏览器 String.fromCodePoint(6特性) String.prototype.codePointAt(6特性) ...

  2. Node.js 上传图片并保存

    Node.js 上传图片并保存 依赖 package.json 文件 { "name": "demo", "version": " ...

  3. 网页静态化解决方案-Freemarker

    1.1    技术简介与使用 1.1.1     简介 为什么使用: 1.  减轻数据库的访问压力,静态化比较适合大规模且相对变化不太频繁的数据: 2.  有利于SEO(搜索引擎优化); 纯的HTML ...

  4. ie浏览器报 promise 问题

    1.首先安装:babel-polyfill    npm install babel-polyfill --save2.然后引入:babel-polyfill 在build目录下,webpack.ba ...

  5. 购物车功能:使用jQuery实现购物车全选反选,单选,商品增删,小计等功能

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  6. 浅淡 RxJS WebSocket

    const open$ = new Subject(); const ws = webSocket({ url: 'wss://echo.websocket.org', openObserver: o ...

  7. 【原创】CRM 2015/2016,SSRS 生成PDF文件,幷以附件的形式发送邮件

    主要步骤如下: 生成一条邮件记录 生成一条ActivityParty记录 生成PDF文件,并以Base64添加到ActivityMimeAttachment 中去 打开发送邮件窗口,以便编辑及发送邮件 ...

  8. Spark SQL join的三种实现方式

    引言 join是SQL中的常用操作,良好的表结构能够将数据分散到不同的表中,使其符合某种规范(mysql三大范式),可以最大程度的减少数据冗余,更新容错等,而建立表和表之间关系的最佳方式就是join操 ...

  9. KKT原理以及SVM数学的理论推导分析

    一直很好奇机器学习实战中的SVM优化部分的数学运算式是如何得出的,如何转化成了含有内积的运算式,今天上了一节课有了让我很深的启发,也明白了数学表达式推导的全过程. 对于一个SVM问题,优化的关键在于 ...

  10. Java学习笔记三十:Java小项目之租车系统

    Java小项目之租车系统 一:项目背景介绍: 根据所学知识,编写一个控制台版的“呱呱租车系统” 功能: 1.展示所有可租车辆: 2.选择车型.租车量: 3.展示租车清单,包含:总金额.总载货量以及其车 ...