- JSLearn-ES6 'ES6语法学习'
JavaScript基础知识剖析
01 变量与原型
- 01-01
变量类型和计算（1） - 01-02
变量类型和计算（2） - 01-03
变量类型和计算（3）-JSON的理解 - 01-04
原型与原型链-构造函数 - 01-05
原型规则和示例 - 01-06
原型链 - 01-07
instanceof - 01-08
知识点小结 & 解决问题
02
- 02-01
作用域和闭包-执行上下文 - 02-02
作用域和闭包-this - 02-03
作用域和闭包-作用域 - 02-04
作用域和闭包-闭包 - 02-05
知识点小结 & 解决问题
03
- 03-01
异步和单线程-什么是异步 - 03-02
异步和单线程-单线程 - 03-03
其他知识点-日期和Math - 03-04
其他知识点-数组和对象的API
04
- 04-01
从基础知识到JS-Web-API - 04-02
DOM本质 - 04-03
DOM节点操作 - 04-04
DOM结构操作 - 04-05
DOM知识总结 - 04-06
BOM知识点
05
- 05-01
事件-知识点 - 05-02
Ajax-XMLHttpRequest - 05-03
存储
06
- 06-01
模块化 - 06-02
模块化-AMD - 06-03
模块化-CommonJS
07
- 07-01
上线回滚-上线回滚流程
08 JS算法
- 08-01
JavaScript算法测试函数 - 08-02
JavaScript算法-冒泡排序 - 08-03
JavaScript算法-选择排序
09 函数应用
- 09-01
JavaScript算法测试函数
JS小练习
- JSDemo JS小程序
- JDMenu 京东无延迟菜单
- DatePicker组件开发
- 手风琴效果开发
知识点学习
01-01
变量类型和计算（1）
- JS中使用typeof能得到的哪些类型
- 何时使用
===何时使用== - JS中有哪些内置函数
- JS变量按照
存储方式区分为哪些类型，并描述其特点 - 如何理解
JSON
值类型
- 从内存来说值类型是把每一个值存储在变量类型的每一个位置
var a = 100;
var b = a;
a = 200
console.log(b);//100
引用类型
- 把a赋值*-成一个对象，a的位置是通过指针指向一个位置
- 把b赋值成a，其实是定义一个b，b的指针指向了那个对象位置
- 也就是有两份
age：20的对象 - 对象的引用，就相当于复写一个对象，这两个对象之间相互独立
- 引用类型：对象、数组、函数
var a ={age:20};
var b = a;
b.age = 21;
console.log(a.age); //21
- typeof运算符
typeof undefined //undefined
typeof 'abc' // String
typeof 123 //number
typeof true //boolean
typeof {} //object
typeof [] //object
typeof null //object
typeof console.log //funciton
变量计算-强制类型转换
- 字符串拼接
var a = 100 + 10;//110
var b = 100 + '10';//10010
- == 运算符
100 == '100' //true
0 == '' //true
null == undefined //true
- if语句
var a = true;
if(a){
//....
}
var b = 100;
if (b) {
//....
}
var c = ''；
if (c) {
//...
}
- 逻辑运算
console.log(10 && 0); //0
console.log('' || 'abc'); //abc
console.log(!window.acb); //true
//判断一个变量会被当做true还是false
var a = 100;
console.log(!!a);//true
01-02
变量类型和计算（2）
JS中使用typeof能得到的类型
//问题：JS中使用typeof能得到哪些类型
typeof undefined //undefined
typeof 'abc' // String
typeof 123 //number
typeof true //boolean
typeof {} //object
typeof [] //object
typeof null //object
typeof console.log //funciton
- 总结来说typeof可以得到
undefined、String、number、boolean可以区分值类型，但对于引用类型无法很细的区分，只能区分函数。 - 尤其是
typeof null object它是一个引用类型
何时使用 === 和 ==
//问题：何时使用===何时使用==
if (obj.a == null) {
//这里相当于 obj.a === null || obj.a === undefined,简写形式
//这是jquery源码中推荐的写法
}
JS中的内置函数
//问题：JS中有哪些内置函数----数据封装类对象
//作为构造函数的作用
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
JS按照存储方式区分变量类型
//JS 变量按照存储方式区分为哪些类型，并描述其特点
//值类型
var a = 10;
var b = a;
a = 11;
console.log(b); // 10
//引用类型
var obj1 = {x:100}
var obj2 = obj1;
obj1.x = 200;
console.log(obj2.x); // 200
- ES中，引用类型是一种数据结构，用于将数据和功能组织在一起
01-03
变量类型和计算（3）-理解JSON
//问题：如何理解JSON
//JSON只不过是一个JS对象
//JSON也是一个数据格式
JSON.stringify({a:10,b:20});
JSON.parse('{"a":10."b":20}')
01-04
原型与原型链-构造函数
- 如何准确判断一个变量数组类型
- 写一个原型链继承的例子
- 描述new一个对象的过程
- zepto(或其他框架)源码中如何使用原型链
知识点
- 构造函数
- 构造函数-扩展
- 原型规则和示例
- 原型链
- instanceof
构造函数
- 自己的想法
普通的函数就像是按步骤执行的动作，而构造函数更像是可更改零件的木偶，普通函数可以直接调用，但是构造函数需要new因为构造函数也是函数，所以可以直接被调用，但是它的返回值为undefine，此时构造函数里面的this对象等于全局this对象- 扩展
实例和对象的区别，从定义上来讲：1、实例是类的具象化产品，2、而对象是一个具有多种属性的内容结构。
funciton Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class-1';
// return this //默认有这一行
}
var f = new Foo('zhangsan',20); //实例化对象
// var f1 = new Foo('lisi',22) //创建多个对象
构造函数-扩展
-
var a = {}其实是var a = new Object()的语法糖 -
var a = []其实是var a = new Array()的语法糖 -
function Foo(){...}其实是var Foo = new Function(...) - 使用
instanceof判断一个函数是否是一个变量的构造函数- 如果想判断一个变量是否为“数组”：变量
instanceof Array
- 如果想判断一个变量是否为“数组”：变量
01-05
原型规则和示例
- 5条原型规则
- 原型规则是学习原型链的基础
第1条
- 所有的引用类型(数组、对象、函数)，都具有对象特质、即可自由扩展属性(除了“NULL”以外)
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn(){
fn.a=100;
}
第2条
- 所有的引用类型(数组、对象、函数)，都有一个
__proto__(隐式原型)属性，属性值是一个普通的对象
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
第3条
-
prototype解释为JavaScript开发函式库及框架 - 所有的函数，都有一个
prototype（显示原型）属性，属性值也是一个普通对象。
console.log(fn.prototype);
第4条
- 所有引用类型（数组、对象、函数），
__proto__属性值指向它的构造函数的prototype属性值
console.log(obj.__proto__ === Object.prototype);
第5条
- 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的
__proto__(即它的构造函数prototype)中寻找
//构造函数
function Foo(name,age){
this.name = name;
}
Foo.prototype.alertName = function () {
alert(this.name);
}
//创建示例
var f = new Foo('zhangsan')
f.printName = function () {
console.log(this.name);
}
//测试
f.printName();
f.alertName();
- this
循环对象自身属性
var item;
for (item in f) {
//高级浏览器已经在for in 中屏蔽了来自原型的属性
//但是这里建议大家还是加上这个判断，保证程序的健壮性
if(f.hasOwnProperty(item)) {
console.log(item);
}
}
01-06
原型链
//构造函数
function Foo(name,age){
this.name = name;
}
Foo.prototype.alertName = function (){
alert(this.name);
}
//创建示例
var f = new Foo('zhangsan');
f.printName = function () {
console.log(this.name);
}
//测试
f.printName();
f.alertName();
f.toString(); // 要去f.__proto__.__proto__中查找
原型链视图
原型链图
01-07
instanceof
- 用于判断
引用类型属于哪个构造函数的方法 -
f instanceof Foo的判断逻辑是： -
f的__proto__一层一层往上走，是否能对应到Foo.prototype - 再试着判断f instanceof Object
01-08
知识点小结 & 解决问题
如何准确判断一个变量是数组类型
var arr = [];
arr instanceof Array; //true
typeof arr //object typeof是无法判断是否是数组
写一个原型链继承的例子
//动物
function Animal(){
this.eat = function () {
console.log('animal eat');
}
}
//狗
function Dog(){
this.bark = function () {
console.log('dog bark');
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
//如果要真正写，就要写更贴近实战的原型链
- 推荐 阮一峰老师的两篇文章：Javascript 面向对象编程（一）：封装、Javascript继承机制的设计思想
描述new一个对象的过程
- 创建一个新对象
- this指向这个新对象
- 执行代码，即对this赋值
- 返回this
function Foo(name,age){
this.name = name ;
this.age = age ;
//return this //默认有这一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('list',22) //创建多个对象
zepto(或其他框架)源码中如何使用原型链
- 。。。。。。
贴近实际开发原型链继承的例子
function Elem(id) {
this.elem = document.getElementById(id);
}
Elem.prototype.html = function (val) {
var elem = this.elem;
if (val) {
elem.innerHTML = val;
return this; // 链式操作
}else {
return elem.innerHTML;
}
}
Elem.prototype.on = function (type, fn) {
var elem = this.elem ;
elem.addEventListener(type, fn) ;
}
var div1 = new Elem('div1');
//console.log(div1.html());
div1.html('hello imooc
')
div1.on('click',function () {
alert('click')
})
02-01
作用域和闭包-执行上下文
知识点梳理
- 执行上下文
- this
- 作用域
- 作用域链
- 闭包
执行上下文
console.log(a); // undefined
var a = 100;
fn('zhangsan') // 'zhangsan' 20
function fn(name) {
age = 20;
console.log(name, age);
var age;
}
- 范围：一段