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';
};
原型继承(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
这样,继承就完成了。
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)}`);
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);
Written with StackEdit.
Javascript 初学笔记的更多相关文章
- javascript初学笔记
基本语句 赋值条件循环语句 javascript异常处理语句 trycatchfinally语句 Error对象 throw语句 函数 定义 调用 嵌套函数 函数的嵌套定义 内置函数 匿名函数和Fun ...
- Javascript初学篇章_5(对象)
对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...
- C++ STL初学笔记
C++ STL初学笔记 更系统的版本见徐本柱的PPT set 在这儿:http://www.cnblogs.com/pdev/p/4035020.html #include <vector&g ...
- JavaScript基础笔记二
一.函数返回值1.什么是函数返回值 函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...
- JavaScript基础笔记一
一.真假判断 真的:true.非零数字.非空字符串.非空对象 假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- javascript - 工作笔记 (事件四)
在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装, JavaScript Code 12345 yx.bind(item, "click&quo ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
随机推荐
- JDK代码中的优化 之 “avoid getfield opcode”
在查看String类源码时,常看到注释 /* avoid getfield opcode */ 如 trim()方法 public String trim() { int len = value.le ...
- 【Step By Step】将Dotnet Core部署到Docker下
一.使用.Net Core构建WebAPI并访问Docker中的Mysql数据库 这个的过程大概与我之前的文章<尝试.Net Core—使用.Net Core + Entity FrameWor ...
- Linux 嵌入式 开发环境 交叉编译安装
1.安装 Ubuntu 系统 安装完毕,系统 提示 重启,这个时候 请拔掉U盘,进行重启 OK. 2.安装 NFS 服务 3.安装 openssh服务 4.开启openSSH服务 5.就可以使用 Wi ...
- Oracle数据库对表基本的操作--增删查改
--向student表中加入入学时间属性,其数据类型为日期型alter table student add scome date; --删除student表中的入学时间属性alter table st ...
- iOS获取设备ip地址(OC版)
#import <SystemConfiguration/CaptiveNetwork.h> #import <ifaddrs.h> #import <arpa/inet ...
- Java并发编程(七)终结线程
线程的状态 一个线程会有如下五个状态 1.新建:线程在被创建时会暂时处于这种状态,此时系统为线程分配资源并对其进行初始化 2.就绪:此时线程已经可以运行,只是系统没有为其分配CPU时间. 3.运行:系 ...
- BufferedImage缓存图片(data:image/jpg;base64,)转换base64输出与解析
1.比如说二维码图片数据data,不想落地生成jpg文件,通过java缓存文件转换base64输出到页面展示,那么java后端处理写法参考如下: InputStream is = new ByteAr ...
- 基于CLGeocoder - 反地理编码
iOS中CoreLocatio框架中的CLGeocoder 类不但为我们提供了地理编码方法,而且还提供了反地理编码: 同样需要导入框架: #import <CoreLocation/CoreLo ...
- Redis开启远程访问及密码认证
配置 redis.conf 文件 [root@localhost bin]# vi /usr/local/redis/bin/redis.conf 将 bind 127.0.0.1 注释掉 将 pro ...
- 大数据学习--day14(String--StringBuffer--StringBuilder 源码分析、性能比较)
String--StringBuffer--StringBuilder 源码分析.性能比较 站在优秀博客的肩上看问题:https://www.cnblogs.com/dolphin0520/p/377 ...