标签：bubuko ret 情况 list 就会 创建 变量提升 log false
1.原型和原型链
2.作用域和闭包
3.异步和单线程
被称为JavaScript的三座大山
原型和原型链：
在JavaScript中，数组，对象和函数被称为引用类型，他们都有一个__proto__属性，该属性是一个对象（我们称之为隐式原型）
arr数组的构造函数是Array，Array构造函数中有一个prototype属性，（我们暂时称之为显式原型）
arr是构造函数的实例对象，arr中的__proto__对象指向构造函数中的prototype对象
接下来是一个简单的demo
1 //创建一个构造函数 2 function Animal(name){ 3 this.name = name 4 } 5 Animal.prototype.eat = function(){ 6 console.log(‘Animal--eat‘) 7 } 8 // 用new初始化一个Animal的实例对象 9 var dog = new Animal(‘xiaohuang‘) 10 11 console.log(dog.name) 12 console.log(dog.eat())
输出结果为
看一下dog对象中有什么属性
调用dog的属性和方法时，会先从dog本身去查找，如果dog本身没有那个属性或方法，就会去dog的__proto__原型中去查找，而__proto__又指向Animal的prototype（看第二个constructor对象，指向Animal），这就是原型链
再来一个demo
1 //创建一个构造函数 2 function Animal(name){ 3 this.name = name 4 } 5 //创建一个Hashiqi的构造函数 6 function Hashiqi(){ 7 } 8 Animal.prototype.eat = function(){ 9 console.log(‘Animal--eat‘) 10 } 11 Hashiqi.prototype.color = function(){ 12 console.log(‘Hashiqi---color‘) 13 } 14 //改变prototype的指向 15 Animal.prototype = new Hashiqi() 16 // 用new初始化一个Animal的实例对象 17 var dog = new Animal(‘xiaohuang‘) 18 19 console.log(dog.name) 20 console.log(dog.eat()) 21 console.log(dog.color())
这个demo中改变了Animal的prototype，将其指向一个Hashiqi的实例对象，我们来看结果。此时dog.eat()会报错，dog.color正常输出
第三个demo，比较上档次一点
1 <div id="wrapper">this is wrapper</div> 2 <script> 3 //创建一个Elem的构造函数 4 function Elem(id){ 5 //获取dom元素 6 this.id = document.getElementById(id) 7 } 8 Elem.prototype.html = function(val){ 9 //如果val为空，则打印dom元素的innerhtml值 10 if(val == null){ 11 console.log(this.id.innerHTML) 12 //返回this，可以用来进行链式操作 13 return this 14 }else{ 15 this.id.innerHTML = val 16 return this 17 } 18 } 19 //绑定事件 20 Elem.prototype.on = function(type, fn){ 21 this.id.addEventListener(type,fn) 22 } 23 24 </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
1 console.log(a) 2 var a = 10 3 console.log(a)
相当于
1 var a 2 console.log(a) 3 a = 10 4 console.log(a)
函数声明也是，以下函数相当于把整个fn提到作用域的最上面，所以调用fn时会正常打印jack
1 fn(‘jack‘) 2 function fn (name){ 3 console.log(name) 4 }
不过函数表达式不行，以下是一个函数表达式，JavaScript会把var fn提到作用域最上面，没有吧函数提上去，所以会报错
1 fn("jack"); 2 3 var fn = function(name) { 4 console.log(name); 5 };
2.闭包
使用场景：1.函数作为参数传递 2.函数作为返回值传递
三言两语说不清楚，我们来看一个demo
1 function F1(){ 2 var a = 100 3 //返回一个函数 4 return function(){ 5 console.log(a) 6 } 7 } 8 9 var a = 200; 10 var f1 = F1(); //将f1指向F1 11 f1()
第11行输出结果是100
第11行调用f1的时候要打印a变量，return的函数中没有a变量，所以a是个自由变量，要去声明该函数（不是调用）的父级作用域去查找，即functin F1中，a=100
闭包在开发中的应用
以下函数的目的是：当_list中没有val值时，返回true并把val添加到_list中
这个demo使用了闭包，在外部无法直接访问_list这个Fn函数的私有变量，这样可以保证数据不被污染，提高了安全性
1 function Fn(){ 2 var _list = [] 3 4 return function(val){ 5 if(_list.indexOf(val) < 0){ 6 _list.push(val) 7 return true 8 }else{ 9 return false 10 } 11 } 12 } 13 14 var f1 = Fn() 15 console.log(f1(10)) //true 16 console.log(f1(10)) //false 17 console.log(f1(20)) //true 18 console.log(f1(20)) //false
异步和单线程
异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助
异步和同步的区别: 异步会阻塞程序的执行，同步不会阻塞程序的执行，
比如只有在执行完alert后才会打印100，如果你不去点击弹框的确定键，console.log就永远不会执行，这就是同步的阻塞
第二个demo中，会马上就打印100，两秒后再打印setTimeout，这就是异步不会阻塞程序执行
1 alert(‘ook‘) 2 console.log(100)
1 setTimeout(function(){ 2 console.log(‘setTimeout‘) 3 },2000) 4 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变量，就要去声明该函数的父级作用域中去找，而不是调 用）
1 for(var i = 0; i < 5; i++){ 2 //创建一个a标签 3 var a = document.createElement(‘a‘) 4 a.innerHTML = i + 1 + ‘<br>‘ 5 //给a标签绑定click事件 6 a.addEventListener(‘click‘, function(e){ 7 e.preventDefault() 8 console.log(i) 9 }) 10 //将a标签添加到wrpper中 11 document.querySelector(‘#wrapper‘).appendChild(a) 12 }
解决这个问题就可以用闭包，用一个function把给a添加时间的地方包起来，(function（i）{})(i) 这是函数的自调用。注意：自调用前要加分号，也就是第4行结束要加分号，不然js会分不清何时开始自调用，会报错
1 for(var i = 0; i < 5; i++){ 2 //创建一个a标签 3 var a = document.createElement(‘a‘) 4 a.innerHTML = i+1 + ‘<br>‘; 5 //给a标签绑定click事件 6 (function(i){ 7 a.addEventListener(‘click‘, function(e){ 8 e.preventDefault() 9 console.log(i+1) 10 }) 11 })(i) 12 //将a标签添加到wrpper中 13 document.querySelector(‘#wrapper‘).appendChild(a) 14 }
JavaScript基础--------三座大山（前端面试必考）
标签：bubuko ret 情况 list 就会 创建 变量提升 log false
原文地址：https://www.cnblogs.com/zhaozhaoli/p/10051265.html
