50天js学习--文章来源于前端进阶之旅

目录

一.入门到放弃的第一天

二、第二天（window）

判定数据类型：

最常见的判断方法：typeof

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

根据对象的constructor判断：constructor

通用但很繁琐的方法：prototype

数据类型转换

---

---

一.入门到放弃的第一天

知识点：

1.操作系统就是一个应用程序

2.只要是应用程序都要占用物理内存；

3.浏览器本身也是一个应用程序

4.浏览器本身只懂得解析HTML

5.调用浏览器这个应用程序的一个功能绘制

 1.JavaScript介绍

JavaScript操作DOM的本质就是=获取+触发+改变

目的：就是用来操作内存中的DOM节点

• 修改DOM节点的属性
• JavaScript语法组织逻辑代码操作DOM
• BOM（window）包括了DOM
• DOM（document）
• script脚本推荐放在最下边好处：防止导致因网络问题导致的加载时间过长，出现空白界面；即便网络问题，浏览器也会把DOM加载渲染完成，等待从服务端下载完js脚本，出现效果
• css不放在最下面原因通俗易懂的讲：好比先穿衣服再出去，浏览器先把css样式准备好，在加载结构层，使得页面有样子；放在下面，页面是从下往上加载，没有css，就剩下裸露的标签，很难看使得用户体验不好

2.基于对象的内存管理

JavaScript就是来操作这些对象

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

3.变量

变量本质是一个空盒子，里面记录了一个内存地址，使能找到内存的对象，保存了指向具体的实在的对象地址

变量存在  栈   中，对象和复杂的类型（数组和字典）存在  堆   中；

当堆创建一个对象时，并返回一个指向该对象的引用。这个引用会被存储在栈中的变量中，因此你可以通过这个变量来访问对象。

栈（stack）/stæk/是一种有序的特殊区域，用于存储临时创建的局部变量，包括函数的参数。

栈中的内存分配和释放都是由系统自动完成的，工作方式类似于物理世界中的栈。

在栈中，只有处于顶部的数据（最后一个进入的数据）才可以被取出（即后进先出，LIFO）。栈空间相对较小，但可以快速访问。

堆（Heap）/hiːp/ 是一种创建对象的内存区域。与栈不同，栈是由程序员负责管理的，程序员需要手动分配和释放堆内存。

变量的意义：方便我们去操作对象

变量的几种引用方式

• 指针（this--c语言叫法）
• 引用（Java）
• 变量

var  b = document.body  

把body这个对象在内存中的地址放到b变量中，变量b（b是内存地址的别名）本身也存在内存中，以后的操作是针对body这个地址

变量命名规范

• 由字母（a-zA-Z）数字（0-9）下划线（_）以及美元符号（$）
• 不能以数字开头
• 命名尽量用英文并且具有一定的含义
• 如果有多个英文单词后面单词的首字母大写
• 不能使用关键字
• 首字母大写，大写是有特殊含义的

dom在内存中的图示

二、第二天（window）

知识回顾

1、JavaScript介绍

2、基于对象的内存管理

     JavaScript就是来操作这些对象

     通过逻辑组织对象之间的关系和行为

     如何操作这些对象？通过变量的引用

3、变量

知识点

1、window作用域

   只要在script标签中定义的变量，默认就在window的作用域之下

   默认就是window这个对象里面写代码

2、数据类型

如何判断js中的数据类型

typeof、instanceof、constructor、prototype方法

             /ˈɪnstəns/

判定数据类型：

判定js中的类型，eg：

var a = "iamstring"
var b = 222;
var c = [1,2,3];
var d = new Date();
var e = function(){alert(11);};
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返回的类型都是字符串形式，需要注意，EG：

alert(type a == "string") //---true
alert(type a == string) //---false

另外typeof可以判断function的类型；

在判断object类型的对象时比较方便。

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

alert(c instanceof Array) //---true
alert(d instanceof Date)  //---true 
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) //ture

EG:

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;

注意：解决constructor的问题通常是让对象的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）

1. 数值（number）：整数和小数（1和3.14）
2. 字符串（string）：字符组成的文本（“Hello world”）
3. 布尔值（boolean）：true（真）和false（假）两个特定值
4. undefined：表示未定义或不存在，即此处目前没有任何值
5. null：表示空缺，即此处应该有一个值，但目前为空；
6. 对象（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(){};
console.log(n1.toString());//"12"
console.log(n2.toString());//"true"
console.log(a.toString());//"1,2,3"
console.log(o.toString());//"[object Object]"
console.log(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)-把给定的值转换成字符串

String(123);//"123"
String([1,2]);//"1,2"
String(undefined) //"undefined"
String(null)//"null"
String({})//"[object Object]"

隐式类型转换

• 数字+字符串：数字转化为字符串     ----     console.log(12+"12");//1212
• 数字+布尔值：true转换为1，false转换为0  ----   console.log(12+true);//13
• 字符串+布尔值：布尔值转换为true或false  ----    console.log("hello"+true);//hellotrue
• 布尔值+布尔值   ---- console.log(true+true);

3、JavaScript脚本执行的顺序

第一步定义：分为var定义和函数定义function

第二步执行：其他所有

先从上往下定义完所有后，再从上往下执行除了var function定义外的其他都是执行  

如：赋值  函数调用

在栈里面找到的，就不去堆里面找，因为栈的空间小，就近原则【总之：先在栈里面找，找不到再去堆里面找】