JavaScript基础--------三座大山

1.原型和原型链

2.作用域和闭包

3.异步和单线程

被称为JavaScript的三座大山

 

原型和原型链：

在JavaScript中，数组，对象和函数被称为引用类型，他们都有一个__proto__属性，该属性是一个对象（我们称之为隐式原型）

arr数组的构造函数是Array，Array构造函数中有一个prototype属性，（我们暂时称之为显式原型）

arr是构造函数的实例对象，arr中的__proto__对象指向构造函数中的prototype对象

接下来是一个简单的demo

//创建一个构造函数
        function Animal(name){
            this.name = name
        }
        Animal.prototype.eat = function(){
            console.log('Animal--eat')
        }
        // 用new初始化一个Animal的实例对象
        var dog = new Animal('xiaohuang')
        
        console.log(dog.name)
        console.log(dog.eat())

输出结果为

看一下dog对象中有什么属性

调用dog的属性和方法时，会先从dog本身去查找，如果dog本身没有那个属性或方法，就会去dog的__proto__原型中去查找，而__proto__又指向Animal的prototype（看第二个constructor对象，指向Animal），这就是原型链

再来一个demo

//创建一个构造函数
        function Animal(name){
            this.name = name
        }
        //创建一个Hashiqi的构造函数
        function Hashiqi(){
        }
        Animal.prototype.eat = function(){
            console.log('Animal--eat')
        }
        Hashiqi.prototype.color = function(){
            console.log('Hashiqi---color')
        }
        //改变prototype的指向
        Animal.prototype = new Hashiqi()
        // 用new初始化一个Animal的实例对象
        var dog = new Animal('xiaohuang')
        
        console.log(dog.name)
        console.log(dog.eat())
        console.log(dog.color())

这个demo中改变了Animal的prototype，将其指向一个Hashiqi的实例对象，我们来看结果。此时dog.eat()会报错，dog.color正常输出

 

第三个demo，比较上档次一点

 

<div id="wrapper">this is wrapper</div>
    <script>
        //创建一个Elem的构造函数
       function Elem(id){
           //获取dom元素
           this.id = document.getElementById(id)
       }
       Elem.prototype.html = function(val){
           //如果val为空，则打印dom元素的innerhtml值
           if(val == null){
               console.log(this.id.innerHTML)
               //返回this，可以用来进行链式操作
               return this
           }else{
               this.id.innerHTML = val
               return this
           }
       }
       //绑定事件
       Elem.prototype.on = function(type, fn){
           this.id.addEventListener(type,fn)
       }
       
    </script>

首先new一个实例对象：　　var el = new Elem('wrapper')

　　　　　　　　　　　　el.html(' ookook ').on('click', function(){  console.log('this is ook') }  )

接下来点击ookook就会打印this is ook

 

 作用域和闭包：

JavaScript中有函数作用域和全局作用域（es6中用let声明的变量具有块作用域）

 函数作用域是在一个函数中有效，全局作用域在全局都有效

*函数内部如果变量和全局变量重名了，则在该函数内部，以函数变量为准

*函数外部无法访问函数内部定义的变量（该变量是函数私有的），不过函数内部可以访问函数外部的全局变量

 

　　1.变量提升

javascript中声明并定义一个变量时，会把声明提前，以下会先打印出undefined，再打印出10

 

　　　　　console.log(a)
        var a = 10
        console.log(a)

 

相当于

        var a
        console.log(a)
        a = 10
        console.log(a)    

函数声明也是，以下函数相当于把整个fn提到作用域的最上面，所以调用fn时会正常打印jack

fn('jack')
        function fn (name){
            console.log(name)
        }

不过函数表达式不行，以下是一个函数表达式，JavaScript会把var fn提到作用域最上面，没有吧函数提上去，所以会报错

fn("jack");
      
      var fn = function(name) {
        console.log(name);
      };

 

　　2.闭包

　　使用场景：1.函数作为参数传递　　2.函数作为返回值传递

　　三言两语说不清楚，我们来看一个demo

function F1(){
        var a = 100
        //返回一个函数
        return function(){
            console.log(a)
        }
      }

      var a = 200;
      var f1 = F1(); //将f1指向F1
      f1()

 

第11行输出结果是100

第11行调用f1的时候要打印a变量，return的函数中没有a变量，所以a是个*变量，要去声明该函数（不是调用）的父级作用域去查找，即functin F1中，a=100

　　闭包在开发中的应用

　　以下函数的目的是：当_list中没有val值时，返回true并把val添加到_list中

　　这个demo使用了闭包，在外部无法直接访问_list这个Fn函数的私有变量，这样可以保证数据不被污染，提高了安全性

function Fn(){
          var _list = []
            
          return function(val){
              if(_list.indexOf(val) < 0){
                  _list.push(val)
                  return true
              }else{
                  return false
              }
          }
      }

      var f1 = Fn()
      console.log(f1(10))   //true
      console.log(f1(10))   //false
      console.log(f1(20))   //true
      console.log(f1(20))   //false

 

 

异步和单线程

　　异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助

　　异步和同步的区别: 异步会阻塞程序的执行，同步不会阻塞程序的执行，

　　　　　　　　　　比如只有在执行完alert后才会打印100，如果你不去点击弹框的确定键，console.log就永远不会执行，这就是同步的阻塞

　　　　　　　　　　　第二个demo中，会马上就打印100，两秒后再打印setTimeout，这就是异步不会阻塞程序执行

    alert('ook')
     console.log(100)

 

setTimeout(function(){
            console.log('setTimeout')
        },2000)
        console.log(100)

 

　　在哪些场景中会异步执行

　　JavaScript中以下三种情况会异步执行　　1.定时任务：setTimeout, setInterval　　2.网络请求：ajax请求，动态加载<img>图标　　3.事件绑定：比如‘click’等

 

　　看一个demo

　　以下函数的目的是在页面中创建5个a标签，点击第一个a标签打印1，点击第二个a标签打印2，以此类推。可执行结果都是5，为什么呢？

　　因为click是一个异步事件，计算机不知道用户什么时候会点击，所以不能够是同步，不然用户不点击，程序就永远无法往下执行。

　　异步事件会先拿出来放到一个队列里，等同步事件执行完了，再来执行异步事件

　　所以当你点击a标签的时候，i已经循环到5了（i是全局变量。这也涉及到了js作用域：该函数没有定义i变量，就要去声明该函数的父级作用域中去找，而不是调　用）

　　　　for(var i = 0; i < 5; i++){
            //创建一个a标签
            var a = document.createElement('a')
            a.innerHTML = i + 1 + '<br>'
            //给a标签绑定click事件
            a.addEventListener('click', function(e){
                e.preventDefault()
                console.log(i)
            })
            //将a标签添加到wrpper中
            document.querySelector('#wrapper').appendChild(a)
        }

 

 

解决这个问题就可以用闭包，用一个function把给a添加时间的地方包起来，(function（i）{})(i) 这是函数的自调用。注意：自调用前要加分号，也就是第4行结束要加分号，不然js会分不清何时开始自调用，会报错

 for(var i = 0; i < 5; i++){
            //创建一个a标签
            var a = document.createElement('a')
            a.innerHTML = i+1 + '<br>';
            //给a标签绑定click事件
            (function(i){
                a.addEventListener('click', function(e){
                e.preventDefault()
                console.log(i+1)
            })
            })(i)
            //将a标签添加到wrpper中
            document.querySelector('#wrapper').appendChild(a)
        }