js数据类型存储、作用域、变量提升

一、数据类型

1.js中一共有六种数据类型

String：字符串类型

Number：数字类型

Boolean：布尔值

Null：空值

Undefined：未定义

Object：对象

其中前5个是基本数据类型，Object属于引用数据类型。

二、强制类型装换

1.转换String类型

方式一：调用被转换数据类型的toString()方法。

该方法不会影响到原变量，他会将转换的结果返回，但是对null和undefined的值调用此方法会报错。

方法二：调用String()函数，并将被转换的数据作为参数传入。对null和undefined结果“null”和“undefind”。

2.转换Boolean类型

方式：调用Boolean()函数

数字转换Boolean类型除0和NaN外，都是true。

Boolean(123);//true
Boolean(-123);//true
Boolean(0);//false
Boolean(NaN);//false

字符串转换Boolean类型除空字符串，其余都是true

Boolean("");//false
Boolean("false");//true
Boolean("true");//true
Boolean(" ");//true

Null转换Boolean类型是false

Boolean(null);//false

undefined转换Boolean类型是false

Boolean(undefined);//false

Object转换Boolean类型是true

Boolean(Object);//true

三、操作符/算术运算符

1.typeof可以获取一个值得类型，并以字符串的类型返回该值得类型

2.对非数字类型的值进行运算时，会将该值转成Number类型在做运算。

3.任何值和NaN做运算结果都是NaN。

true+1=2;
false+1=1;
null+1=1;
NaN+1=NaN;

4.+运算两个字符串会仿作拼串操作。

”123“+”456“=”123456“

5.任何值和字符串相加都会转成字符串，并做拼串处理。

四、对象基本使用

1.使用new关键字调用函数，通过构造函数constructor来创建对象。

var obj=new Object();

2.删除对象属性

delete obj.name;

3.引用数据类型和基本数据类型存储

• JS中的声明的变量都是保存在占内存中
• 基本数据类型的值直接保存在占内存,值与值之间不会相互影响
• 引用数据类型值保存在堆内存中，而变量在栈内存中存放对应堆内存的地址。如果两个变量保存的是同一个对象引用，则其一个变动时，另一个变量也会变动，因为两个变量其实指向的是同一个堆内存的值。

基本数据类型存储

var a=123;
var b=a;
a++;
console.log(a);//124
console.log(b);//123

引用数据类型存储(同一个对象引用)

操作同一块堆内存

var obj1=new Object();//创建一个对象引用，并将引用地址赋值给obj1
var obj2=obj1;//并将引用地址赋值给obj2,即obj1和obj2保存同一个引用地址，都是指向同一个堆内存
obj2.name="Javon";
console.log(obj1);//{name: "Javon"}
console.log(obj2);//{name: "Javon"}

切断联系

var obj1=new Object();
var obj2=obj1;
obj2.name="Javon";
obj2=null;//null在js中是以object形式保存，这里将null的堆内存地址赋值给了obj2
console.log(obj1);//{name: "Javon"}，obj1所保存的还是原来的堆内存地址
console.log(obj2);//null，obj2保存的堆内存地址这是null的

五、函数

函数类型也属于object,即Function类。

函数的声明

方式一：构造函数创建，将封装的代码以字符串的形式传递给构造函数。

var fun = new Function ('d', 'return d-1');
console.log(fun(1));//0

方式二：函数声明

function fun(d){
    return d-1;
}

方式三：函数表达式(匿名函数)

var fun=function(d){
    return d-1;
}

六、方法

将一个函数复制个对象的一个属性，则成这个函数为这个对象的方法。调用对象属性函数即调用该对象的方法。

备注：方法，仅仅用于区分执行函数和执行对象属性函数的名称上的区分，其之间没有本质的区别。

var obj2=obj1;
obj2.name="Javon";
obj2.sayName=function(){
    console.log(this.name);
}

7、作用域

1.全局作用域

-全局作用域在页面打开时创建，在页面关闭是销毁

-全局作用域的变量都会作为window对象的属性

-全局作用域的函数都会作为window对象的方法

2.函数作用域

-调用函数时创建函数作用域，函数执行王完毕销毁

-每次调用都会创建一个新的函数作用域，之间相互独立

-函数作用域在操作变量前先在自身作用域寻找，有则直接使用，否则像上一次作用域寻找

8、声明变量提前

作用域内所有的变量和函数提前声明

1.变量提前

-使用var关键字声明的变量，会在所有代码执行之前先声明但是不会赋值。

-变量声明没有块作用域

代码

conso.log(a);
var a=1;

编译

var a;
conso.log(a);
a=1;

2.函数提前

-使用函数声明形式创建的函数其定义会在所有代码执行之前被定义。

-函数表达式不会。

-函数提前有块作用域

-函数名称和变量名称相同时，函数提前会有先，变量会不会被提前。

函数声明式

funA();
function funA(){
    
}

函数表达式

funA();//报错
var funA=function(){
}

3.函数名称和变量名称同名的时候函数的优先级比变量高

代码

 var a=0;
 if(true){
   a=1;
   function a(){
   }
   a=2;
   console.log("里面",a);//2
 }
 console.log("外面",a);//1

编译

 var a;
 var a=0;
 if(true){
   function a(){};//全局作用域a为a(){};
   a=1;//全局作用域a被重新赋值1
   var a;//由于函数同名的原因，在函数后面的a没有被提升，则在if块内被声明
   a=2;//此处的a是if块内的a
   console.log("里面",a);//2
 }
 console.log("外面",a);//1

代码执行效果

var a=0;
if(true){
  console.log("函数提升赋值到全局a",a)
  a=1;
  console.log("全局a被重置",a)
  function a(){
  }
  a=2;
  console.log("if块里面",a);//2
}
console.log("全局外面",a);//1

9、this指向

 解析器在调用函数时会想函数内部传递一个隐含的参数this,this指向的是一个函数执行的上下文对象。

-以函数的方式调用时，this指向window（全局作用域）

function fun(){
    console.log(this);//window
}

fun();

-严格模式下，函数的方式调用时，this是undefined（全局作用域）

"use strict";
function fun(){
    console.log(this);//undefined
}

fun();

-以方法的形式调用时，this就是调用方法的那个对象

var obj={
    say:fun
}
function fun(){
    console.log(this);//obj
}

obj.say();

-构造函数的this指向构造函数创建的对象实例

"use strict";
function person(){
    this.name = null;
    this.sayname = function(){
        return this.b;
    }
}
var obj = new person();
obj.b = 'Javon';
console.log(obj.sayname());

-setTimeout内this指向window

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout

setTimeout(function(){
    console.log(this);//window
},0)

10、setTimeout运行机制

var person={
    sayName:function(){
        setTimeout(function(){
            console.log(0)
        },0)
    }
}
console.log(1)
setTimeout(function(){
    console.log(2)
},100)
setTimeout(function(){
    console.log(3)
},1)
setTimeout(function(){
    console.log(4)
},0)
setTimeout(function(){
    console.log(5)
},100)
console.log(6);
person.sayName();

//结果：1 6 3 4 0 2 5

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout