JavaScript基础笔记 - 渡一の姬成

个人觉得渡一教育在前端培训方面的很不错，虽然没有报渡一的前端培训班，但是刚学习前端时都是通过渡一的免费课程入门的，几个老师讲课都很好，特别是成哥曾是我一度偶像（当然现在也是，只不过后面的课没看渡一课程在学，关注少了点），本篇笔记便是当初学习JS基础时所记录，上线方便自己查看

讲课教师：渡一教育-姬成 现任渡一信息开发有限公司 CEO，原阿里巴巴 UC 移动事业群购物搜索项目负责人

视频链接：https://ke.qq.com/course/231577?taid=2841395744442521

1. 基本数据类型

1-1 原始值

1. number 数值类型
2. string 字符串类型
3. boolean 布尔类型
4. undefind 未定义
5. null 空类型

1-2 引用类型

1. array 数组
2. object 对象
3. function 函数
4. data 数据
5. regExp 正则表达式

1-3 原始值与引用值得区别

• 原始值存在于栈内存，存放的是直接拷贝的数据
• 引用值存在与堆内存，存放的是引用的内存地址

1-4 错误类型

• 低级错误：语法解析错误（一句也不会执行）
• 逻辑错误：标准错误，情有可原（影响当前代码块执行）

2. 逻辑运算符

2-1 '&&'运算符表示并且

• 布尔值判断口诀
  • 全真才为真，有一个假即为假
• 返回原理
  • 先看"&&"所连接得到第一个表达式，如果为真，则返回 第二个表达式的结果；如果为假，则返回第一个表达式的结果

var a = 1&&false
console.log(a)
// 输出'false'

var a = o&&true
console.log(a)
// 输出'true'

• 应用场景

  • 常规使用，接收返回值，或者当做逻辑判断式

  • 开发常用，当做短路语句

    data&&document.write(data)
    // 作用：保证data的存在情况下输出
    

2-2 '||'或运算符表示或者

• 布尔值判断口诀

  • 全假才为假，有一个真即为真

• 返回值原理

  • 先看'||'所连接的第一个表达式，如果是假，则返回第二个表达式的j结果；如果为真，则返回第一个表达式的结果。跟“&&”的原理相反

• 应用场景

  • 常规使用，接收返回值，或当做逻辑判断表达式

  • 开发常用，兼容性

    var event = e||window.event
    // 作用：使代码在不同内核的浏览器中能够兼容。
    

2-3 '!'非运算符

• 返回原理：
  • 返回的布尔值，再取反，返回的结果为布尔值

2-4 补充及'&''|'位运算

• **注意：**2-1、2-2 讨论的是两个表达式连接的情况，如有多个表达式，类似方法推理
• **位运算'&'：**将其转化为二进制，逐位比较，相等为0，不等为1
• **位运算'|'：**将其转化为二进制，逐位比较，相等为1，不等为0，与上一条相反

2-5 typeof操作符

• 用法格式：

var res = typeof（a）;
// 作用：得到a的基本数据类型，结果返回为string类型

• 返回值的6种数据类型：

  • number 数字类型 特殊：NaN
  • string 字符串类型
  • boolean 布尔类型
  • undefind undefind类型
  • object 对象类型 特殊：{ }、[ ]、null（null为历史遗留性问题）
  • function 函数类型

  alert(typeof(2))
  // 结果是：number
  alert(typeof("a"))
  // 结果是：string
  
  alert(typeof(a))
  // a为未定义变量--》》结果是：undefind
  alert(typeof（typeof(a)))
  // a为未定义变量--》》结果是：string
  

3. 类型转化

3-1 隐式类型转化

• number( mix )

  将目标转化为数字类型，转化不了的为非数NaN

• parseInt( string，radix )；

  ①、用法一：将目标转化为整数类型，直接去掉小数点后的数

  ②、用法二：砍断原则，获取开头的数字 100px--》》100

  ③、用法三：转化进制 以目标进制为基底，转化为10进制

  如：parseInt（1a，16）;--》》将16进制数1a转化为10进制的数--》》结果是：26

  注意：radio的取值范围为2-32

• parsefloat( string );

  砍断原则，获取开头的带小数的数字 100.2px--》》100.2

• string( mix );

  将目标转化为字符串类型，所有的都能被转化

• mix.to string( radio )；

  ①、用法一：将目标转化为字符串类型，null不能使用此方法

  ②、用法二：转换进制 以十进制为基底，转化为目标进制

  如：var num = 8;

  **alert（num.to string（2））; //**radio的取值范围为2-32

  将十进制数8转化为二级制数

  结果是：1000

• mix.to fixed（n）；

  将mix保留小数点后n位小数，四舍五入原则

  例如：123.456.to fixed（2）；--》》结果是：123.46

3-2 隐式类型转化

• isNaN（mix）；--》》隐参照：number（）方法

  将mix经过number()方法后的结果与NaN进行比对，是则返回true，不是则返回flase

• ++/-- =/-（一元正负）--》》隐参照：number（）方法

• + （加）--》》隐参照：string()方法

• - * / % --》》隐参照：number（）方法

• && || ！--》》隐参照：boolean（）方法

• < > <= >= --》》隐参照：number（）方法

• == != --》》隐参照：number（）方法

• === !== 绝对运算符不发生类型转换

注意：NaN == NaN （非数自己不等于自己）

4. 形参和实参列表

4-1 实参列表

• 定义：
  • 在每个函数中都有名为arguments的类数组用于存取实参，arguments[ ] 即被称为实参列表

eg(1,2);
function eg(a,b){
	//相当于在此处建立了实参列表  arguments{1,2}
}

4-2 形参与实参列表的关系

1. 形参与arguments并不是同一个地址，而是通过映射规则所建立了映射关系
2. 形参与arguments并不是同一个地址，而是通过映射规则所建立了映射关系
3. 只有arguments与形参位置上对应上的参数才回建立映射关系，只有建立了映射关系的参数才适用于映射规则

5. 预编译及预编译前奏

5-1 浏览器解析页面代码：

1. **语法解析：**将代码通篇扫描一遍，看看是否出现低级语法错误或者拼写错误、漏写等情况
2. 预编译：（具体看详解）
3. **解释执行：**解释一行代码，执行一行代码

5-2 浏览器预编译

• 口诀

  • 函数声明整体提升
  • 变量的声明提升

• 预编译前奏：

  1. **imply global ：**暗示全局变量，即任何变量，如果变量未经声明和赋值，此变量就为全局变量所有

• 预编译四部曲：（全局函数只需①④两部曲）

  1. 创建AO对象（Activation Object 执行期上下文）

     全局函数为GO对象 （Global Object 全局执行期上下文）

  2. 寻找形参和变量声明，将形参名和变量名作为AO属性名，值默认为undefined

  3. 、将实参值和形参统一并赋予AO对应属性

  4. 在函数体里面找函数声明，将整个函数体作为值赋予AO对应属性

• 注意：

  • 声明提升的过程，将无视任何语句，如if、for、while、which等都不会影响声明提升

  • if 语句里面不允许定义新的函数体 如 function a(){ ... }

  • 注意区别函数声明和函数表达式

    eg: function a(){ } ==》》此为函数声明

    eg：var a = function（）{ } ==》》此为函数表达式

6. 闭包

6-1 闭包的概念

• 内部函数保存到了外面，必定会产生闭包。闭包会导致原有的作用域链不释放，造成内存泄漏。

6-2 闭包的作用

• 实现公有变量
  • 函数累加器，如计算网站的访客量
• 可以做缓存（存储结构）
  • eater ( )
• 可以实现封装，属性私有化
  • 构造函数
• 模块化开发，防止污染全局变量
  • onclik绑定事件会产生闭包

6-3 命名空间

• 命名空间的定义

  命名空间是闭包的一个巧用，，作用是管理变量，防止污染全局变量，适用于模块化开发

• 命名空间运用

  • var  yitian  =  js.global.xu;
    // 变量的引用，起到缩短代码的作用
    

  • var  yitian = function( ){
        var  a = 123;
        var  b = 345;
        function  sayA(){
        	console.log( a );
        }
        function  sayB(){
        	console.log( b);
        }
        return  function(){
            sayA();
            sayB();
        }
    }
    // 私有化变量
    

7. 包装类

7-2 包装类的概念

• 为了便于操作基本类型值，ECMAScript 提供了 3 个特殊的引用类型：Boolean、Number和 String。这些类型与其他引用类型相似，但同时也具有与各自的基本类型相应的特殊行为。实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据。

7-3 原始值与原始值对象的区别：

• **原始值：**只能参与运算，原始值操作不了属性和方法，通过new关键词创建为原始值对象

• **原始值对象：**能定义变量和方法等，参与运算之后即转化为原始值

• 典型eg：

  var box = 'Mr. Lee';//定义一个字符串
  // 字符串为string类型，其为原始值
  
  var box2 = box.substring(2);//截掉字符串前两位
  // box能使用方法的原理是：隐式创建了一个new String（Mr.Lee）的原始值对象，调用了其的substring方法
  // 此语句的最后会将创建的对象delete销毁掉，如不保存出来，此举将无意义
  
  alert(box2);//输出新字符串
  

8. 原型prototype

8-1 原型的定义

• 原型是 function 对象的一个性质，它定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的 对象，可以继承该原型的属性和方法，原型也是对象。

8-2 原型的特性

1. 利用原型的特点和概念，可以提取共有属性
2. 对象可以通过查看隐式属性 “proto” 来查看原型
3. 对象可以通过 “constructor方法” 来查看构造函数

8-3 原型链__propt _

• 规律：

  • 绝大多数对象的最终都会继承自object.prototype

    即object.prototype是对大多数对象的公有祖先

  • 仅有一种情况例外：

    object.create ( null );

    create方法的括号里（）必须填原型或者null

• 扩展

  • 用object.create（原型）方法构造对象

    eg : var obj = object.create(xxx.prototype)

  • document.write 隐式调用对象的 toString （ ）方法

8-4 改变this指向：call/apply

• **call：**需要把实参按照形参的个数传进去

• **apply：**需要传一个arguments 数组

• **相同点：**作用都是改变this指向

  **不同点：**传参列表不同

8-5 继承模式

• 继承的发展史

  • 传统形式 原型链

    • 过多继承了没用的属性
    • eg：son.prototype.lastName = "Xu"

  • 借用构造函数

    • 不能继承构造函数的原型
    • 每次每次构造一个函数都需要多走一个函数，即视觉上节省代码，运行上更耗性能
    • eg：son.call ( this, lastName, sex)

  • 共享原型

  • • 不能随便改动自己的原型
    • eg：son.prototype = father.prototype;

  • 圣杯模式

  • • 目前开发常用的方法

      • 
          var  intherit  =  function(){		//intherir(A,B)实现A继承B的属性
           	var F = function (){  };		//定义一个中间函数F作为嫁接
          	return  function (Target , Origin){		//形参Target继承Origin
                F.prototype = Origin.prototype;		
                Target.prototype = new  F();			//此两行代码实现函数的继承
                Target.prototype.constuctor = Target;		//修正将函数的构造原型
                Target.prototype.uber = Origin.prototype;	//将其继承的父级原型保						   存，以备后用	
          	}
        }