你不知道的javascript（上卷）----读书笔记

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>你不知道的javascript（上卷）</title>
</head><body><script type="text/javascript">/*//9、this 的全面解析this的绑定和函数声明位置没有任何关系，之取决于函数的调用方式在理解this的绑定过程之前，首先理解调用位置：调用位置就是在代码中被调用的位置（问不是声明位置，）。只有仔细分析调用位置才能回答这个问题：这个this到底引用的是什么通常来说，寻找调用位置就是寻找“函数被调用的位置”2.1、函数调用位置function baz(){console.log("baz");  bar();  //bar的调用位置}function bar(){console.log("bar");foo();//foo的调用位置}function foo(){console.log("foo");}baz();//baz的调用位置b、函数调用位置2function foo(){console.log(this.a);}var a = 2;//2foo();function foo(){"use strict";console.log(this.a);  //报错，严格模式下，this不会默认绑定给window}var a = 2;foo();function foo(){console.log(this.a);}var a = 2;(function(){"use strict";foo(); //2})();//三种情况下，只要函数执行不是执行在严格模式下，默认绑定才会绑定到全局上2.2、绑定规则2.2.1默认绑定function foo(){console.log(this.a);}var a = 2;foo();//2//非严格模式下，this默认绑定在window下function foo(){"use strict";console.log(this.a);}var a = 2;foo();// this is not defined;//严格模式下不能将全局对象默认绑定，因此this会绑定到undefined上function foo(){console.log(this.a);}var  a = 2;(function(){"use strict";foo();//2 })()//严格模式下的调用不影响默认绑定2.2.2隐式绑定function foo(){console.log(this.a);}var obj = {a : 2,foo : foo}obj.foo();//无论是直接在obj中定义还是先定义在添加为引用属性，这个函数严格来说不属于obj对象，//调用位置会使得obj上下文来引用函数，因此你可以说函数被调用时obj对象“拥有”或者“包含”函数function foo(){console.log(this.a);}var obj2 = {a : 42,foo : foo}var obj1 = {a : 2,obj2 : obj2}obj1.obj2.foo();//42//对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。//隐式丢失function foo(){console.log(this.a);}var obj = {a : 2,foo : foo}var bar = obj.foo;//函数别名var a = "oops,global";bar();//"oops,global";2.2.3显示绑定function foo(){console.log(this.a);}var obj = {a : 2,}foo.call(obj);//2//通过foo.call(..),我们可以调用foo时强制把他的this绑定到obj上//硬绑定 function foo(){console.log(this.a);}var obj = {a : 2,}var bar = function(){foo.call(obj);}bar();//2setTimeout(bar,1000);//2bar.call(window);//2//硬绑定的bar不可能在修改他的this//创建函数bar(),并且在内部手动调用foo.call(obj),//因此强制把foo的this绑定到obj，无论后面我们如何调用到bar(),//他总会手动在obj上调用foo，这种绑定是一种显性绑定，因此我们称之为硬绑定//API调用的‘上下文’function foo(el){console.log(el,this.id); //1 awesome 2 awesome 3 awesome}var obj = {id : "awesome",}//调用foo()时把this绑定到objvar arr = [1,2,3].forEach(foo,obj);//console.log(arr);new 绑定使用new调用函数，会执行以下操作1、创建（或者说构造）一个全新的对象2、这个新对象会被执行[[Protoptye]]连接3、这个新的对象会绑定到函数调用的this4、如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新的对象function foo(a){this.a = a;}var bar = new foo(2);console.log(bar.a);2.3优先级默认绑定 < 隐式绑定 < 显式绑定 < new ....2.4被忽略的thisfunction foo(){console.log(this.a);}var a = 2;foo.call(null);//2//call 参数为null或者undefined的时候会默认是全局this柯里化。。。。*//*8、this词法 var foo = a =>{  console.log(a);}foo(2); //2//箭头函数，是根据为层（函数或者全局）作用域来决定thisvar foo1 = function(a){console.log(a);}foo1(2);// 两种声明是等效的var obj = {id : "awesome",cool:function coolFn(){console.log(this.id)}};var id = "not awesome";obj.cool(); //awesomesetTimeout(obj.cool,100); // not awesome // setTimeout 导致 cool()函数丢失了同this之间的绑定//解决方案var obj = {count : 0,cool: function coolFn(){var self = this;if(self.count<1){setTimeout(function timer(){self.count++;console.log("awesome");},100);}}}obj.cool(); // awesome*//*//7、动态作用域function foo(){console.log(a);}function bar(){var a = 3;foo();}var a = 2;bar();  //2  输出结果是2，词法作用域让foo()中的a通过RHS引用到了全局//作用域中的a，因此会输出2function foo(){console.log(a); //a is not defined}function bar(){var a = 3;foo();}bar();function foo(){var a  = 3;console.log(a); //引用的是局部变量a的值}var a = 1;foo();// 3*//*//5、闭包作用域function foo(){var a = 2;function bar(){console.log(a);}return bar;}var baz = foo();baz(); //2 foo() 的返回值是bar()函数，所以通过baz()可以执行这个函数function foo(){var a = 2;function baz(){console.log(a);}bar(baz);} function bar(fn){fn();  }foo();//2  foofor(var i = 0;i<=5;i++){(function(){var j = i;setTimeout(function time(){console.log(j);  // 每100毫秒输出一个数，分别输出0,1,2,3,4},j*100);})()}for(var i = 0;i<=5;i++){(function(j){setTimeout(function time(){console.log(j); // 每100毫秒输出一个数，分别输出0,1,2,3,4},j*100);})(i)}for(var i = 1;i<=5;i++){(function(){setTimeout(function time(){console.log(i); // 每100毫秒输出一个数，分别输出6,6,6,6,6},i*100);})()}*//*//4、提升 --先编译在执行a = 2;var a;console.log(a);//a  因为var声明的变量存在提升console.log(b); //undefined var声明存在提升，赋值不存在提升，所以b存在但是没赋值var b = 2;foo();  //函数竟然可以执行，说明函数声明也提升了function foo(){console.log(a); //undefined , 声明提升了，不存在赋值提升var a = 2;}foo(); //1  var foo;function foo(){console.log(1);}foo = function(){console.log(2)}//引擎编译如下function foo(){console.log(1);}foo(); //1  var foo = function(){console.log(2)}foo(); //3//var foo 尽管出现在在function之前，但是由于是重复声明，所以被忽略掉//函数声明会被提升到普通变量之前function foo(){console.log(1);}var foo = function(){console.log(2);}function foo(){console.log(3);}foo();  // foo is not a functionvar a = true;if(a){function foo(){console.log("A");}}else{function foo(){console.log("B");}}*//*//3.4.3、let和var的区别for(var i = 0;i<10;i++){}console.log(i);// 10for(let j=0;j<10;j++){}console.log(j);// j is not defined//for循环结束后i并没有被销毁，导致全局污染*//*//3.3.2、立即执行函数:抱在一对括号内var a = 2;(function foo(){var a = 3;console.log(a); //3})();console.log(a);// 2*//*//块级作用域，函数作用域//3.2、规避冲突*//*function foo(){function bar(a){i = 3;console.log(a+i);}for(var i = 0;i<10;i++){bar(i*2);}}foo();//死循环，bar中的i覆盖了for循环中的i导致死循环*//*//2.2.1、evalfunction foo(str,a){ eval(str);console.log(a,b); //4}var b = 2;var result = foo("var b = 3;",1);console.log("result:",result); //undefined???默认严格模式？//书上的结果是1,3因为eval（str）== var  b = 3; 读取的是局部变量3function foo(str){"use strict";eval(str);console.log(a);}foo("var a = 2");//a si not defined*/</script>
</body></html>

转载于:https://www.cnblogs.com/SunlikeLWL/p/7376458.html

你不知道的javascript（上卷）----读书笔记相关推荐

JS闭包—你不知道的JavaScript上卷读书笔记（二）
关于闭包,初学者会被绕的晕头转向,在学习的路上也付出了很多精力来理解. 让我们一起来揭开闭包神秘的面纱. 闭包晦涩的定义看过很多关于闭包的定义,很多讲的云里雾里,晦涩难懂.让不少人以为闭包是多么玄乎 ...
你不知道的JavaScript 上卷读书笔记
看了<你不知道的JavaScript 上>,为了防止自己忘记,特此记下与我而言的部分重点任何足够先进的技术都和魔法无异. --Arthur C. Clarke 作用域和闭包编译原理分 ...
JavaScript设计模式读书笔记（一）= 创建型设计模式
全系列目录 JavaScript设计模式读书笔记(一)=> 创建型设计模式 JavaScript设计模式读书笔记(二)=> 结构型设计模式 JavaScript设计模式读书笔记(三)=&g ...
JavaScript设计模式读书笔记（四）= 技巧型设计模式
全系列目录 JavaScript设计模式读书笔记(一)=> 创建型设计模式 JavaScript设计模式读书笔记(二)=> 结构型设计模式 JavaScript设计模式读书笔记(三)=&g ...
你不知道的javascript上卷
你不知道的javascript上卷作用域 javascript是一门编译语言,它不是提前编译的,编译结果也不能在分布式系统中移植.编译的步骤一般如下: 分词/词法分析词法分析是有状态的判断一个分词 ...
【你不知道的JavaScript上卷】——作用域与闭包
原文: [你不知道的JavaScript上卷]--作用域与闭包 JS语言万变不离其宗,其中最常用.最重要的也就是常用的几个大概念.数据类型.作用域.原型链.闭包.this指针.异步,不同的人理解不一样 ...
《你不知道的JavaScript上卷》知识点整理与读书笔记
各位路过的的大佬.求关注.求点赞.谢谢第一部分作用域和闭包第1章作用域是什么 1.1编译原理 1.2理解作用域 1.3作用域嵌套 1.5异常第2章词法作用域 2.1词法阶段 2.2欺骗词法 ...
你不知道的JavaScript 上卷 Part1
这篇博客躺在我的草稿箱里有一阵子了,差点给遗忘了哈哈. 前言最近开始喜欢读一些书,从书中找答案,在阅读中查漏补缺. 记得小学初中时候最爱看书了,如今却不知怎的,习惯性从网络中摄取知识,搜 ...
200530你不知道的JavaScript[上卷]所有小结汇总
JS上卷整理说点啥 1504的书,现在(2005)才想起好好看,过去5年零1个月了,证明自己的技术能力真是水了5年多.抓紧补齐吧. S11 表示 <不知道系列> 上卷第一部分第一章 ...
JavaScript百炼成仙读书笔记
JavaScript百炼成仙作者:剽悍一小兔没事儿的时候多读书还是蛮好的,这本书给我的感觉就像是真的在看修仙人士不断修炼去打怪升级一样,以不一样的视角重新温习了一遍前端的知识,和以往所读的其他书籍 ...

你不知道的javascript（上卷）----读书笔记

你不知道的javascript（上卷）----读书笔记相关推荐

最新文章

热门文章