唯心主义蠢货的[js知识总结] 变量部分(变量类型 深浅拷贝 变量提升)

变量

文章大纲

1.变量类型

js的变量类型有两种

• 基本类型: null undefined number boolean string symbol(ES6)

  是存放在栈中的简单数据段，按值储存，所以可以按值访问，大小由类型确定，内存空间大小可以分配

• 引用类型: object(function array 都是基于object拓展出来的 typeof arr == ‘object’，涉及到原型链部分)

  数据存放在堆中，在栈中保存对象的引用地址

深拷贝 浅拷贝

• 浅拷贝

  即复制引用类型的数据时，只是简单的将地址拷贝过来，两块地址指向同一块堆内存，所以改a即改b

  实现方式

  var a  = {key1: {m:123,h:33},key2: 'b'
  }
  var b = {};/*对于对象来说*/
  //1.直接拷贝对象属性
  function copy(x,y){Object.keys(x).forEach((key) => { y[key] = x[key]; })
  }
  let arr = [1,{ my: 'dog' } ];
  let arr2;
  copy(arr,arr2);
  arr2[1].my = 'asaa';
  console.log(arr2);//2.调用对于assign函数  对于只有一层的对象进行深拷贝，但是对于第二层  第三层会复制对象的地址
  b = Object.assign({},obj)
  //如a.key2 会被深拷贝， a.key1 会被浅拷贝/*对于数组来讲*/
  //1.Array.prototype.concat() // 连接空值返回一个浅拷贝数组
  let arr = [1,{ my: 'dog' } ];
  let arr2 = arr.concat();
  arr2[1].my = 'pig';
  console.log(arr);//2.Array.prototype.slice() // 切片从0开始  返回一个浅拷贝数组
  let arr = [1,{ my: 'dog' } ];
  let arr2 = arr.slice(0);
  arr2[1].my = 'pig';
  console.log(arr);
  

• 深拷贝

  如果我们想要两者不建立联系，则可以直接复制属性

  var a  = {key1: {m:123,h:33},key2: 'b'
  }
  var b = {};//对于只有一层的对象 直接用assign函数
  b = Object.assign({},obj);//使用递归进行实现
  function copy(x){//判断是否为数组let y = Array.isArray(x)?[] : {};for(let i in x){//判断当前项是否为对象  如果是则深复制if(typeof x[i] === 'object'){y[i] = copy(x[i]);}//如果否 则浅复制else{y[i] = x[i];}}return y
  }
  b = copy(a);
  a.key1.m = 'c';
  console.log(b);
  

2.变量提升

解释（javascript并不是严格的自上而下执行的语言。）

当没有定义变量时，输出会报错，当定义变量时，当前变量会提升到可执行区域的最上方，但暂时不进行赋值，且当变量和函数重名时，函数的优先级高于变量。

即 函数自动提升到最上方； 变量的定义提升到最上方，但是赋值语句不变

原因

js在编译阶段会搜集所有的变量声明，并提前进行声明，但不会改变其他语句的执行顺序。

1.变量的定义

即 var a = 2;等价于 var a;(编译阶段) a=2(运行阶段)

2.当函数出现时

• 当函数和变量名相同时，函数是js的第一公民，所有以函数名为准

• 当函数定义重复时，以后边的为准，即后面的声明替换掉前面的声明

• 对于函数表达式 var x = function () { … } 与对变量的定义相同，报error，var x； x = function(){}

3.let/const 出现的情况

let/const 统一也会进行变量提升，但是在执行对应定义语句之前，是不能进行访问的，所以提前输出会出现not defined的状况，即代码编译到let/const执行定义之前，对应变量无法访问，称为时间死区。

一些题目

• 1

  function f(a){console.log(a);//(){}var a = 2;console.log(a);//2function a(){};console.log(a);//2}f(1);/* 等价于function f(a){var a;var a = (){}；//函数提升到这一部分console.log(a);a = 2;console.log(a);console.log(a);}f(1); */

• 2

function test() {console.log(a);  // undefinedconsole.log(foo()); // 2var a = 1;function foo() {return 2;}
}test();/* 等价于
function test() {var a;function foo() {return 2;}console.log(a);  // undefinedconsole.log(foo()); // 2a = 1;
}test();*/

• 3 注意 foo = (){ … } 但是 foo() = 函数体里的内容

function test() {console.log(foo); // (){}console.log(bar); // undefinedvar foo = 'Hello';console.log(foo); // 'hello'var bar = function () {return 'world';}function foo() {return 'hello';}
}test();/* 等价于
function test() {var foo;var bar;function foo() {return 'hello';}console.log(foo);console.log(bar);foo = 'Hello';console.log(foo);bar = function () {return 'world';}}test();

思考

为什么string是基本类型，但是还可以用indexof或者其他的一些方法

原始值被当作构造函数创建的一个对象来使用时， JS 会将其转换为一个对象，以便其可以使用对象的特性（如方法），而后抛弃对象性质，并将它变回到原始值

基本包装类型 的概念。除了 Object Array 等引用类型外，其实还有三种特殊的引用类型 String Number 和 Boolean，方便我们操作与其对应的基本类型，而它们就是基本包装类型。str 作为一个基本类型是没有 length 属性的，但是它的基本包装类型 String 有啊，其实在执行 console.log(str.length) 这段代码时，事情的经过是这样的：
创建String类型的一个实例
在实例上调用指定的方法
销毁这个实例

// java 中的拆箱封箱操作，基本类型和引用类型转换，js中省略了这一步

let str = "1353";
console.log(str.length);// 等于
let str_obj = new String(str);
str_obj.length;
str_obj = null;

最后引用一段《Javascript启示录》中的话：
在针对字符串、数字和布尔值使用字面量时，只有在该值被视为对象的情况下才会创建实际的复杂对象。换句话说，在尝试使用与构造函数关联的方法或检索属性（如var len = ‘abc’.length) 之前，一直在使用原始数据类型。当这种情况发生时，Javascript 会在幕后为字面量值创建一个包装器对象，以便将该值视为一个对象。调用方法以后，Javascript 即抛弃包装器对象，该值返回字面量类型。这就是字符串、数字、布尔值被认为是原始数据类型的原因。

既然string有基本包装对象，那么numer是否有原型呢，写出可以正确执行 console.log((5).add(4).minus(8))的操作

Number.prototype.add = function(number){if(typeof number !== "number"){return new Error("输入数字");}return this.valueOf() + number;
}
Number.prototype.minus = function(number){if(typeof number !== "number"){return new Error("输入数字");}return this.valueOf() - number;
}

那如何实现Calc(2).add(5).minus(6)

借用上面的基本包装类型，然后进行使用

Number.prototype.add = function(number){if(typeof number !== "number"){return new Error("输入数字");}return this.valueOf() + number;
}
Number.prototype.minus = function(number){if(typeof number !== "number"){return new Error("输入数字");}return this.valueOf() - number;
}
Number.prototype.print = function(){console.log("result"+this.valueOf());
}console.log((5).add(4).minus(8));
function Calc(n){this.result = n;return this.result;
}Calc(2).add(4).minus(5).print();

也可以通过把Calc当做入口函数，在内部封装具体prototype，然后new 一个对象 暴露原型对象；

unction Calc(n){function calc(){this.result = n;}calc.prototype.add = function(x){this.result += x;return this;}calc.prototype.minus = function(y){this.result -= y;return this;}calc.prototype.print = function(){console.log('result='+this.result);}   return new calc(n);
}Calc(2).add(4).minus(5).print();

https://www.cnblogs.com/Lumia1020/p/5321618.html