javascript笔记总结篇

转载请声明出处博客原文

随手翻阅以前的学习笔记，顺便整理一下放在这里，方便自己复习，也希望你有也有帮助吧

# 第一课时入门基础

# 知识点：

操作系统就是个应用程序
只要是应用程序都要占用物理内存
浏览器本身也是一个应用程序
浏览器本身只懂得解析HTML
调用浏览器这个应用程序的一个功能绘制

# 1、javascript介绍

JavaScript操作DOM的本质是=获取+触发+改变
目的：就是用来操作内存中的DOM节点
- 修改DOM节点的属性
- 过javascript语法组织逻辑代码操作DOM
- BOM(window)它包含了DOM
- DOM(document)
- script脚本推荐放在最下边好处：防止因网络问题，页面加载时间长，出现空白；即便网络问题，浏览器也把DOM加载渲染完成，等待从服务端下载完js脚本，出现效果
- css不放在最下面原因通俗地讲：好比先穿好衣服在出去，浏览器先把css样式准备好，在加载结构层，使得页面有样子；如果放在下面，因为页面是从上往下加载，没有css，就剩下裸露的标签，很难看，使得用户体验不好

# 2、基于对象的内存管理

javascript就是来操作这些对象
- 通过逻辑组织对象之间的关系和行为
- 如何操作这些对象？通过变量引用

# 3、变量

变量本质是一个空盒子，里面记录了一个内存地址，使能找到内存中的对象，保存了指向具体的实在的东西的地址
变量存在栈中，对象存在堆中
变量的意义：方便我们去操作对象
变量的几种引用方式
- 指针（C语言中叫法）
- 引用（Java）
- 变量
例如：
- var b = document.body 含义：把body这个对象在内存中的地址放到b变量里面，变量b（b是内存地址的别名）本身也存在内存中，以后的操作是针对body这个地址
变量命名规范
- 由字母(a-zA-Z)数字(0-9)下划线(_)以及美元符号($)
- 不能由数字开头
- 命名尽量用英文并且具有一定的含义
- 如果有多个英文单词,后面单词的首字母大写
- 不能使用关键字
- 首字母不要大写，大写是有特殊含义的

# DOM在内存中的一些图示

DOM Tree

DOM内存图

# 第二课时

# 回顾上节：

1、javascript介绍
2、基于对象的内存管理
javascript就是来操作这些对象
- 通过逻辑组织对象之间的关系和行为
- 如何操作这些对象？通过变量引用
3、变量

# 知识点：

# 1、`window`作用域

只要在script标签中定义的变量，默认就在window的作用域之下
默认就是window这个对象里面写代码

# 2、数据类型

# 如何判断js中的数据类型：

typeof、instanceof、 constructor、 prototype方法比较
如何判断js中的类型呢，先举几个例子：

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};

@前端进阶之旅: 代码已经复制到剪贴板

# 最常见的判断方法：`typeof`

alert(typeof a)   ------------> string
alert(typeof b)   ------------> number
alert(typeof c)   ------------> object
alert(typeof d)   ------------> object
alert(typeof e)   ------------> function
alert(typeof f)   ------------> function

@前端进阶之旅: 代码已经复制到剪贴板

其中typeof返回的类型都是字符串形式，需注意，例如：

alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false

@前端进阶之旅: 代码已经复制到剪贴板

另外typeof 可以判断function的类型；在判断除Object类型的对象时比较方便。

# 判断已知对象类型的方法： `instanceof`

alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false

@前端进阶之旅: 代码已经复制到剪贴板

注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

# 根据对象的`constructor`判断： `constructor`

alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true

@前端进阶之旅: 代码已经复制到剪贴板

注意： constructor 在类继承时会出错
例子：

      function A(){};
      function B(){};
      A.prototype = new B(); //A继承自B
      var aObj = new A();
      alert(aobj.constructor === B) -----------> true;
      alert(aobj.constructor === A) -----------> false;

@前端进阶之旅: 代码已经复制到剪贴板

而instanceof方法不会出现该问题，对象直接继承和间接继承的都会报true：

      alert(aobj instanceof B) ----------------> true;
      alert(aobj instanceof B) ----------------> true;

@前端进阶之旅: 代码已经复制到剪贴板

言归正传，解决construtor的问题通常是让对象的constructor手动指向自己：

      aobj.constructor = A; //将自己的类赋值给对象的constructor属性
      alert(aobj.constructor === A) -----------> true;
      alert(aobj.constructor === B) -----------> false; //基类不会报true了;

@前端进阶之旅: 代码已经复制到剪贴板

# 通用但很繁琐的方法： `prototype`

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

@前端进阶之旅: 代码已经复制到剪贴板

大小写不能写错，比较麻烦，但胜在通用。
通常情况下用typeof 判断就可以了，遇到预知Object类型的情况可以选用instanceof或constructor方法

# Javascript的数据类型有六种（ES6新增了第七种`Symbol`）

数值（number）：整数和小数（比如1和3.14）
字符串（string）：字符组成的文本（比如"Hello World"）
布尔值（boolean）：true（真）和false（假）两个特定值
undefined：表示未定义或不存在，即此处目前没有任何值
null：表示空缺，即此处应该有一个值，但目前为空
对象（object）：各种值组成的集合
通常，我们将数值、字符串、布尔值称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值

# 内存中一共分为几种对象：

变量
DOM对象
常量
自定义对象

# 数据类型转换

# 转换函数

toString() 转换为字符串，在JavaScript中所有数据类型都可以转换为string类型

        var n1 = 12;
        var n2 = true;
        var a = [1, 2, 3];
        var o = {};
        function f(){}
        n1.toString(); //"12"
        n2.toString(); //"true"
        a.toString(); //"1,2,3"
        o.toString(); //"[object Object]"
        f.toString(); //"function f(){}"

@前端进阶之旅: 代码已经复制到剪贴板

parseInt() 解析出一个string或者number类型的整数部分，如果没有可以转换的部分，则返回NaN（not a number）

       var n1 = "12";
       var n2 = "23hello";
       var n3 = "hello";
       parseInt(n1); //12
       parseInt(n2); //23
       parseInt(n3); //NaN

@前端进阶之旅: 代码已经复制到剪贴板

parseFloat() 解析出一个string的浮点数部分，如果没有可以转换的部分，则返回NaN（not a number）

       var n1 = "1.2.3";
       var n2 = "1.2hello"
       var n3 = "hello"
       parseFloat(n1); //1.2
       parseFloat(n2); //1.2
       parseFloat(n3); //NaN

@前端进阶之旅: 代码已经复制到剪贴板

# 强制类型转换

Boolean(value)- 把给定的值转换成Boolean型

        Boolean(123); //true
        Boolean(""); //false
        Boolean([]); //true
        Boolean({}); //true
        Boolean(null); //false
        Boolean(undefined); //false

@前端进阶之旅: 代码已经复制到剪贴板

Number(value)-把给定的值转换成数字（可以是整数或浮点数）

        Number("123"); //123
        Number("123h"); //NaN
        Number(true); //1
        Number(false); //0
        Number(undefined); //NaN
        Number(null); //0
        Number([]); //0
        Number({}); //NaN

@前端进阶之旅: 代码已经复制到剪贴板

String(value)- 把给定的值转换成字符串

# 隐式转换

# null和undefined

# 3、javascript脚本执行顺序

# 总结一下`==`运算的规则：(隐式转换)

# 第三课时

# 上节回顾：

闭包示例1

闭包示例2

闭包1

闭包2

闭包3

原型链图解

js原型链演示00-new Object

js原型链演示01-函数Foo声明

js原型链演示-对象继承模式-01-浅拷贝

js原型链演示02-new Foo()

js原型链演示02-1-new 原理

js原型链演示03-Foo.prototype

js原型链演示-对象继承模式-03-基于对象的原型继承

js原型链演示05-继承函数示例

js原型链演示06-继承prototype模式

js原型链演示07-继承prototype模式改进

js原型链演示08-继承prototype直接继承

js原型链演示08-继承prototype空对象中介

js原型链演示09-继承prototype空对象中介封装expend

js原型链演示10-构造器拷贝继承

Date 对象方法

js下常用的字符串方法

BOM

学编程最佳实践

JavaScript读书路线--from phodal

DOM基本操作

javascript函数基础

JavaScript数据类型

window对象

javascript变量

JavaScript字符串函数

JavaScript正则表达式

JavaScript流程控制

JavaScript运算符

JavaScript数组

alert(typeof a) ------------> string alert(typeof b) ------------> number alert(typeof c) ------------> object alert(typeof d) ------------> object alert(typeof e) ------------> function alert(typeof f) ------------> function

function A(){}; function B(){}; A.prototype = new B(); //A继承自B var aObj = new A(); alert(aobj.constructor === B) -----------> true; alert(aobj.constructor === A) -----------> false;

aobj.constructor = A; //将自己的类赋值给对象的constructor属性 alert(aobj.constructor === A) -----------> true; alert(aobj.constructor === B) -----------> false; //基类不会报true了;

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true; alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true; alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true; alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true; alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true; alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

var n1 = 12; var n2 = true; var a = [1, 2, 3]; var o = {}; function f(){} n1.toString(); //"12" n2.toString(); //"true" a.toString(); //"1,2,3" o.toString(); //"[object Object]" f.toString(); //"function f(){}"

Number("123"); //123 Number("123h"); //NaN Number(true); //1 Number(false); //0 Number(undefined); //NaN Number(null); //0 Number([]); //0 Number({}); //NaN

javascript笔记总结篇

# 第一课时 入门基础

# 知识点：

# 1、javascript介绍

# 2、基于对象的内存管理

# 3、变量

# DOM在内存中的一些图示

# 第二课时

# 回顾上节：

# 知识点：

# 1、window作用域

# 2、数据类型

# 如何判断js中的数据类型：

# 最常见的判断方法：typeof

# 判断已知对象类型的方法： instanceof

# 根据对象的constructor判断： constructor

# 通用但很繁琐的方法： prototype

# Javascript的数据类型有六种（ES6新增了第七种Symbol）

# 内存中一共分为几种对象：

# 数据类型转换

# 转换函数

# 强制类型转换

# 隐式转换

# null和undefined

# 3、javascript脚本执行顺序

# 总结一下==运算的规则：(隐式转换)

# 第三课时

# 上节回顾：

javascript笔记总结篇

# 第一课时 入门基础

# 知识点：

# 1、javascript介绍

# 2、基于对象的内存管理

# 3、变量

# DOM在内存中的一些图示

# 第二课时

# 回顾上节：

# 知识点：

# 1、window作用域

# 2、数据类型

# 如何判断js中的数据类型：

# 最常见的判断方法：typeof

# 判断已知对象类型的方法： instanceof

# 根据对象的constructor判断： constructor

# 通用但很繁琐的方法： prototype

# Javascript的数据类型有六种（ES6新增了第七种Symbol）

# 内存中一共分为几种对象：

# 数据类型转换

# 转换函数

# 强制类型转换

# 隐式转换

# null和undefined

# 3、javascript脚本执行顺序

# 总结一下==运算的规则：(隐式转换)

# 第三课时

# 上节回顾：

# 第一课时入门基础

# 1、`window`作用域

# 最常见的判断方法：`typeof`

# 判断已知对象类型的方法： `instanceof`

# 根据对象的`constructor`判断： `constructor`

# 通用但很繁琐的方法： `prototype`

# Javascript的数据类型有六种（ES6新增了第七种`Symbol`）

# 总结一下`==`运算的规则：(隐式转换)

# 第一课时入门基础

# 1、`window`作用域

# 最常见的判断方法：`typeof`

# 判断已知对象类型的方法： `instanceof`

# 根据对象的`constructor`判断： `constructor`

# 通用但很繁琐的方法： `prototype`

# Javascript的数据类型有六种（ES6新增了第七种`Symbol`）

# 总结一下`==`运算的规则：(隐式转换)