《你不知道的JavaScript-上卷》笔记
这段时间看了《你不知道的JavaScript》上卷,对很多知识有了重新的认识,所以在这里罗列一些知识点作为巩固。
作用域和闭包
词法作用域
- 变量赋值操作会执行的两个动作
答:编译器会在当前作用域中声明一个变量,前提是之前没有声明过。运行时引擎会在内存中查找该变量然后为它赋值。
- RHS 和 LHS 查询
答:查找容器用LHS查找,查找相应值用RHS查找
- 在作用域顶层无法找到目标变量,在严格模式和非严格模式下有什么结果?
答:非严格模式会创建一个全局变量,严格模式不会并且会报错。
- with的副作用
答:将变量泄露到全局上
function foo( obj ) {
with( obj ) {
a = 2;
}
}
var obj = { b: 3 };
foo( obj );
console.log( obj.a ); // undefined
console.log( a ); // 2 -------> a泄露到了全局上
- 匿名函数的三个缺点
答:1、不利于调试
2、降低可读性
3、在递归时容易出错,由于递归是调用自身,匿名函数无法用函数名调用自身。
- IIFE是什么
答:自执行函数,有两种形式:
(function(xx) {...})();
(function(xx) {...}());
- JS的块作用域以及如何隐式模拟块作用域?
答:js没有强类型语言那样的块作用域,可以用let声明变量达到块作用域实现的效果。
- let 和 var 在变量声明有什么区别?
答:let声明的变量不会提升,var会。
- 提升(变量、函数有什么区别)
答:函数比变量更早提升。
闭包
- 闭包产生的原理
function foo() {
function bar() {};
/*...*/
}
- 闭包遇上for循环,问题、机制、解决办法(考虑let)
答:详情参见我前面关于闭包的博客。
- 模块的两个必要条件
答:1、要有一个外部嵌套函数。
2、封闭函数必须返回至少一个内部函数。
- import 和 module 的区别
答:import会导入模块中的一个或多个API分别绑定在一个变量上,module将整个模块的API导入并绑定到一个变量上。
this和对象原型
this
- 胖箭头 => 的作用原理
答:用当前词法作用域覆盖了this本来的值。
- this是运行时绑定还是编译时绑定?
答:运行时。
- this的四个绑定及其原理
答:1、默认绑定:默认绑定全局变量window。
2、隐式绑定
3、显式绑定:使用call()、apply()
4、new绑定:函数创建对象时用new
- 绑定的优先级
答:new、显式 > 隐式 > 默认
- 为什么setTimeout()中的this会默认绑定到window?
答:setTimeout是一个定义在全局中的函数,所以该函数的this默认为window。
- 写一个硬绑定bind(obj, target);
function bind(fn, target) {
return function() {
return fn.apply(target, arguments);
};
}
- 硬绑定的优势
答:任由外部如何变动,内部的this绑定对象不会改变。
- 使用new调用函数时会发生的四个步骤?
答:1、创建一个全新的对象。
2、对这个新对象执行[prototype]链接。
3、这个新对象会被绑定到函数调用的this。
4、如果函数没有返回值,那么new表达式中的函数调用会自动返回这个新对象,否则返回函数返回值。
对象
- js中的六个基本类型、六个内置对象
答:六个基本类型:null、string、number、boolean、undefined、object
六个内置对象:String、Number、Boolean、Object、Function、Array
- 函数从来不会属于某一个对象
- 对象中内置的get函数的函数名和函数值分别代表什么?
答:函数名------->对象属性名,函数值------->对象属性值
- in 和 hasOwnPrototype 的区别
答:in会在对象中以及原型链中查找对象是否含有该属性,而hasOwnPrototype只会在该对象中查找。
- for...in 的特点?为什么说数组的遍历尽量不用 for...in?
答:会遍历对象所有可枚举的属性,并且不一定按照顺序遍历。
类
- 类的继承其实就是复制,js不能复制
- 隐式混入和显式混入的区别
答:前者直接全部“复制”过来,后者用call、apply
原型
- 原型链上存在隐式屏蔽
- Foo.prototype的 .constructor 属性是一直存在的吗?
答:不是,它是默认的。当你的prototype对象改变了,这个属性就不存在了除非你手动添加。
- var b = Object.create(a);的作用机制
答:创建一个对象b并关联到a。
行为委托
- 一句话概括
答:函数的继承,对象的委托
- 委托的两个原则
答:1、状态保存在委托者,而不是委托目标。
2、避免在[prototype]链上的不同位置使用相同的命名
- 委托的实质?
答:某些对象找不到方法或者属性的引用时可以把请求委托给另一个对象。
- 根据下面函数继承写出相应的行为委托
function A(name) {
this.name = name;
}
A.prototype.sayName = function() {
console.log(this.name);
};
function B(name) {
A.call(this, name);
}
B.prototype = Object.create(A.prototype);
var b = new B('Nic');
b.sayName(); //Nic
var A = {
init: function(name) { this.name = name; },
sayName: function() { console.log(this.name); }
};
var B = Object.create(A);
B.init('Nic');
B.sayName() //Nic
- 将函数封装对象
- 将构造函数内部的变量定义封装成一个函数
- 将prototype对象的函数逐一封装进该对象
- 将两个对象关联
- 此时没有继承的说法了,关联不是上下级的关系,而是任意的
- 关联后可以自定义或者封装新对象的一些属性及方法
- 注意:尽量避免暴露委托
class
- class不能声明属性只能声明方法
class A {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName() {
console.log('hello, my name is: '+this.name);
}
}
var a = new A('wind', 20);
a.sayName(); //hello, my name is: wind
API设计原则
- 最小特权原则:最小限度的暴露必要内容,而将其他内容都“隐藏”起来(将变量声明在某个作用域内尽量不在全局作用域中)
- 尽量避免匿名函数
- 关联关系中尽量避免函数名重复,会引发屏蔽覆盖的副作用
- 内部委托(在内部调用)比直接委托(直接使用)可以让API接口更加清晰
- 委托最好在内部实现,不要轻易的暴露出去
《你不知道的JavaScript-上卷》笔记的更多相关文章
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- HTML+CSS笔记 CSS中级 一些小技巧
水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...
- HTML+CSS笔记 CSS中级 颜色&长度值
颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...
- HTML+CSS笔记 CSS中级 缩写入门
盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...
- HTML+CSS笔记 CSS进阶再续
CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...
- HTML+CSS笔记 CSS进阶续集
元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- HTML+CSS笔记 CSS进阶
文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...
- HTML+CSS笔记 CSS入门续集
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...
- HTML+CSS笔记 CSS入门
简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...
随机推荐
- Mac 10.12安装专业抓包工具Wireshark
说明:专业到不太会用. 下载: (链接: https://pan.baidu.com/s/1c570YE 密码: pkmr)
- Mac下Homebrew的图形化界面工具Cakebrew
安装: brew cask install cakebrew 如果不能下载直接上官网下载dmg包进行安装. 参考: https://www.cakebrew.com/ https://github.c ...
- [Xamarin] 透過StartActivityForResult傳值回來(转贴)
上一篇文章(開啟另外一個Activity 並且帶資料),提到了開啟一個新的Activity ,我們將值透過intent 帶到下個Activity 但是,如果我們開啟的Actrivity其實是有一個任務 ...
- 关闭mac自带apache的启动。
关闭mac自带apache的启动. sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 如果哪天 ...
- ES6 rest参数和扩展运算符
rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0 ...
- PHP之string
string addcslashes() Quote string with slashes in a C style 以 C 语言风格使用反斜线转义字符串中的字符 addslashes() Quot ...
- WPF中使用RenderTransformOrigin来控制动画的起点
Render :渲染:Transform:动画:Origin:起点 RenderTransformOrigin:渲染动画的起点 取值为一个坐标的形式 取值范围: 0,0 到 1,1 0,0:表示左上 ...
- finally是否始终执行
The only times finally won't be called are: If you call System.exit() If the JVM crashes first If th ...
- 使用jQuery实时监听input输入值的变化
//jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...
- 第二章:第2章PHP基础语法
一. 基本的PHP语法如下: 1.PHP脚本可以放在文档中的任何位置,PHP脚本以<?php开始,以?>结束 <?php //PHP代码 ?> 2.php文件的默认文件扩展 ...