JavaScript基础

js的变量

• 变量提升

  1.用var定义的变量会变量提升

  2.定义的函数会变量提升

  3.在函数体内，直接定义变量 num=100，在全局作用域下也可以访问

    // 变量提升:用var定义变量，变量会提升到顶部，值为undefined
       console.log(num)
       var num = 100;
  	
  
      /**********************/
  
      //var 变量提升
      var num;
      console.log(num)
      num = 100;
  
      console.log(num)
      num = 100;
  
  
      /*********************************/
      // var num=100;          //③全局变量，在任何位置可以访问
      function Demo() {
  
        // var num = 100;      //①局部变量
        num = 100;          //②定义的全局变量，在函数外部可以访问
  
      }
      Demo()
      console.log(num)
  
  
      /****************************/
  
      // 函数也会提升
      Demo()          //100
  
      function Demo() {
        num = 100;
        console.log(num)
  
      }

• 命名规范

  大驼峰

   /**********大驼峰************/
      class PersonAddress {
  
      }
  
      new PersonAddress()
  
      /*****构造函数******/
      function Person(uname,age){
  		console.log(this)
      }
  	//new Person()
  	Person.call(obj,参数1，参数2)
  	Person.apply(obj,[参数1，参数2])
  	Person.bind(obj,参数1，参数2)

  小驼峰

  	function getBookCount() {
  
      }
  
      function setName(){
        //设置
  
      }
  
      function isEnglish(){
        //判断用is开头
      }
  
  
      function createCar(){
  
      }
  
      function canRead(){
        //能不能
      }
  
  
      function hasBook(){
        //判断有没有
      }

js作用域（scope）

• 全局作用域

• 局部作用域（块级作用域） {}

  for循环

  white循环

  if嵌套

  函数 var定义一个变量，在外面的全局作用域下，不可以访问

数据类型

• 基础数据类型：

  string，number,boolean, undefined , null

• 复杂数据类型

  Object Array Date RegExp

类型检测

• typeof

  • 对于基本类型，除 null 以外，均可以返回正确的结果。
  • 对于引用类型，除 function 以外，一律返回 object 类型。
  • 对于 null ，返回 object 类型。
  • 对于 function 返回 function 类型

• instanceof 判断是否是某个构造函数的实例

  不能检测简单数据类型

  只能检测复杂数据类型

  console.log("数字", 10 instanceof Number)
  console.log("布尔", true instanceof Boolean)
  console.log("字符串", "" instanceof String)
  console.log("对象", {} instanceof Object)
  console.log("函数", function(){} instanceof Function)
  console.log("数组", [] instanceof Array)

• constructor 判断构造函数

  console.log("数字", (10).constructor == Number)
  console.log("字符串", ('你好').constructor == String)
  console.log("布尔", (true).constructor == Boolean)
  console.log("对象", ({}).constructor == Object)
  console.log("数组", ([]).constructor == Array)
  console.log("函数", (function () { }).constructor == Function)

• toString

  Object.prototype   //原型对象
  __proto__          //原型
  
  
  
  console.log("数字",Object.prototype.toString.call(1))
  console.log("字符串",Object.prototype.toString.call(""))
  console.log("布尔",Object.prototype.toString.call(true))
  
  console.log("对象",Object.prototype.toString.call({}))
  console.log("数组",Object.prototype.toString.call([]))
  console.log("函数",Object.prototype.toString.call(function(){}))

构造函数、原型对象和实例化对象的关系

 

function Demo() {

}

let obj = new Demo()

// console.log(Demo.prototype)   //构造函数的原型对象
// console.log(obj.__proto__)    //实例化对象的原型
// console.log(Demo.prototype == obj.__proto__)

console.log(Demo.prototype.constructor)

类型转换

显式类型转换

• 转换为字符串：toString() 或 String()
• 转换为数值：Number("100ab")、parseInt("121abc121")、parseFloat()
• 转换为布尔值：Boolean()
• 转换为对象：Object()

隐式类型转换

1. 减号、乘号、除号、取模...

   减号、乘号、除号、取模等操作符是比较单纯的操作符。 这些操作符会尝试将他们的操作数转换为数字（使用Number()），如果操作数没法转换为数字的话，他们的结果就是NaN

2. 大于、小于、大于等于、小于等于

   当两个操作数均是字符串的时候，它会执行大家熟悉的字符串比较，即从左到右依次比较每一个字符的ASCII码，若出现符合操作符的情况，则返回true，否则返回false。 无法将操作数转换为数字的情况下总是返回false。

3. ==、!=

   这两个运算符在大部分上面都是与（一）相同的，不同的是：

   • 字符串 op 字符串：不会进行类型转换，直接比较。
   • 对象 op 对象：引用都指向同一个对象才为true。

4. 加号（+）

   当没有特别指定的时候参考（一），比如对象+对象等，但有如下几种例外情况:

   • 字符串 + 字符串：进行字符串拼接操作。
   • 字符串 + 其他：将其他转换为字符串，并进行拼接操作。

运算符

• 四则运算符 + - * / %

• 逻辑运算法 && || !

条件控制

• if和三目运算符

• switch的使用

this的指向

函数类型

• 普通函数

  function demo(){
  
  }

• 匿名函数 window

  let fn=function(){}

• 立即执行函数

  (function(){
  
  
  })()

• 回调函数

  将函数作为参数传递给其他函数，在外部函数中调用它

  function print(callback) {  
      callback();
  }
  创建回调函数
  
  const message = function() {  
      console.log("This message is shown after 3 seconds");
  }
   
  setTimeout(message, 3000);
  setInterval(message,1000)

• 箭头函数 ES6

  箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

var obj = { uname: "张三", age: 21 }

function fn() {
    console.log(this,"外层函数")

    return () => {
        console.log(this,"箭头函数")
    }
}


let result = fn.call(obj) result()

  
  /*判断this指向*/
  
  ```js
  var age=100; 
  var obj = {
        age: 20,
        say: () => {
          alert(this.age)
        }
  }
    obj.say()

this指向总结

函数类型	this的指向
普通函数	指向window
匿名函数	指向window
立即执行函数	window
回调函数	window
箭头函数	函数定义位置的上下文this
对象下的函数	谁调用，指向谁
dom回调	绑定事件的对象