知识点梳理目录列表

  • 变量类型

    • JS的数据类型分类和判断
    • 值类型和引用类型
  • 原型与原型链(继承)
    • 原型和原型链的定义
    • 继承写法
  • 作用域和闭包
    • 执行上下文
    • this
    • 闭包是什么
  • 异步
    • 同步VS异步
    • 异步和单线程
    • 前端异步的场景
  • ES6/7新标准的考查
    • 箭头函数
    • module
    • class
    • set和map
    • promise

变量类型

JavaScript是一种弱类型脚本语言,所谓弱类型指的是定义变量时,不需要什么类型,在程序运行过程中会自动判断类型

ECMAScript中定义了6种原始类型

  • boolean
  • string
  • number
  • undefined
  • null
  • symbol

题目:类型判断用到哪些方法?

typeof

typeof xxx得到的值有一下类型:undefined、boolean、number、string、object、function、symbol

  • typeof null结果是object,实际这是typeof的一个bugnull是原始值,非引用类型
  • typeoof [1,2]结果是object,结果中没有这一项,引用类型除了function其他的全部都是object
  • typeof Symbol()typeof获取symbol类型的值得到的是symbol,这是ES6新增的知识点

instanceof

用于实例和构造函数的对应。例如判断一个变量是否是数组,使用typeof无法判断,但可以使用[1,2] instanceof Array来判断。因为,[1,2]是数组,它的构造函数就是Array:同理

function Foo(name) {
this.name = name
}
var foo = new Foo('bar')
console.log(foo instanceof Foo) // true

constructor

object.prototype.toString.call()

题目:值类型和引用类型的区别

值类型VS引用类型

除了原始类型,ES还有引用类型,上文提到的typeof识别出来的类型中,只有object和function是引用类型,其他都是值类型

根据JavaScript中的变量类型传递方式,又分为值类型引用类型

值类型包括:Boolean、string、number、undefined、null;

引用类型包括:object类的所有,如Date、Array、function等。

在参数传递方式上,值类型是按值传递,引用类型是按地址传递

// 值类型
var a = 10
var b = a
b = 20
console.log(a) // 10
console.log(b) // 20

上述代码中,a b都是值类型,两者分别修改赋值,相互之间没有任何影响。再看引用类型的例子:

// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a) // {x: 100, y: 200}
console.log(b) // {x: 100, y: 200}...

上述代码中,a b都是引用类型。在执行了b = a之后,修改b的属性值,a的也跟着变化。因为a和b都是引用类型,指向了同一个内存地址,即两者引用的是同一个值,因此b修改属性时,a的值随之改动。

再借助题目进一步讲解一下。

题目:说出下面代码的执行结果,并分析其原因。

function foo(a){
a = a * 10;
}
function bar(b){
b.value = 'new';
}
var a = 1;
var b = {value: 'old'};
foo(a);
bar(b);
console.log(a); // 1
console.log(b); // value: new...

通过代码执行,会发现:

  • a的值没有发生改变
  • b的值发生了改变

    这就是因为Number类型的a是按值传递的,而Object类型的b是按地址传递的。

** JS 中这种设计的原因是:**按值传递的类型,复制一份存入栈内存,这类类型一般不占用太多内存,而且按值传递保证了其访问速度。按共享传递的类型,是复制其引用,而不是整个复制其值(C 语言中的指针),保证过大的对象等不会因为不停复制内容而造成内存的浪费。...

引用类型经常会在代码中按照下面的写法使用,或者说容易不知不觉中造成错误!

var obj = {
a: 1,
b: [1,2,3]
}
var a = obj.a
var b = obj.b
a = 2
b.push(4)
console.log(obj, a, b)

虽然obj本身是个引用类型的变量(对象),但是内部的a和b一个是值类型一个是引用类型,a的赋值不会改变obj.a,但是b的操作却会反映到obj对象上。

原型和原型链

JavaScript 是基于原型的语言,原型理解起来非常简单,但却特别重要,下面还是通过题目来理解下JavaScript 的原型概念。

题目:如何理解JavaScript的原型

对于这个问题,可以从下面这几个要点来理解和回答,下面几条必须记住并且理解

  • 1.每一个函数数据类型(函数、类)都天生自带一个prototype属性,prototype的属性值是一个对象数据类型的;
    1. prototype 属性中天生自带一个constructor属性,属性值是当前原型所属的类;
  • 3.每一个对象数据类型值(对象、数组、arguments...)天生自带一个__proto__属性,属性值指向当前实例所属类的原型;
  • 4.所有的函数数据类型(普通函数、类(内置的、自定义))都是Function的一个实例;Function是所有函数的基类;
  • 5.所有的对象数据类型(实例、prototype、对象)都是Object的一个实例;Object是所有对象数据类型的基类;
// 要点一:自由扩展属性
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}
fn.a = 100;
// 要点二:__proto__
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
// 要点三:函数有 prototype
console.log(fn.prototype)
// 要点四:引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值
console.log(obj.__proto__ === Object.prototype)...

原型

// 构造函数
function Foo(name, age) {
this.name = name
}
Foo.prototype.alertName = function () {
alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {
console.log(this.name)
}
// 测试
f.printName()
f.alertName()...

执行printName时很好理解,但是执行alertName时发生了什么?这里再记住一个重点 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找,因此f.alertName就会找到Foo.prototype.alertName。...

那么如何判断这个属性是不是对象本身的属性呢?使用hasOwnProperty,常用的地方是遍历一个对象的时候。

var item
for (item in f) {
// 高级浏览器已经在 for in 中屏蔽了来自原型的属性,但是这里建议大家还是加上这个判断,保证程序的健壮性
if (f.hasOwnProperty(item)) {
console.log(item)
}
}...

题目:如何理解JS的原型链

原型链

还是接着上面的示例,如果执行f.toString()时,又发生了什么?

// 测试
f.printName()
f.alertName()
f.toString()

因为f本身没有toString(),并且f.__proto__(即Foo.prototype)中也没有toString。这个问题还是得拿出刚才那句话——当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找。

如果在f.__proto__中没有找到toString,那么就继续去f.__proto__.__proto__中寻找,因为f.__proto__就是一个普通的对象而已嘛!...

  • f.__proto__Foo.prototype,没有找到toString,继续往上找
  • f.__proto__.__proto__Foo.prototype.__proto__Foo.prototype就是一个普通的对象,因此Foo.prototype.__proto__就是Object.prototype,在这里可以找到toString...
  • 因此f.toString最终对应到了Object.prototype.toString

这样一直往上找,你会发现是一个链式的结构,所以叫做“原型链”。如果一直找到最上层都没有找到,那么就宣告失败,返回undefined。最上层是什么 —— Object.prototype.__proto__ === null

原型中的this

所有从原型或更高级原型中得到、执行的方法,其中的this在执行时,就指向了当前这个触发事件执行的对象。因此printNamealertName中的this都是f

ES基础知识与高频考点梳理的更多相关文章

  1. elastic search&logstash&kibana 学习历程(二)es基础知识

    简介:es的index索引,document文档对象,副本,多节点集群等基础知识 1.通俗的解释: 在Elasticsearch中,文档归属于一种类型(type),而这些类型存在于索引(index)中 ...

  2. nginx应用总结(1)-- 基础知识和应用配置梳理

    在linux系统下使用nginx作为web应用服务,用来提升网站访问速度的经验已五年多了,今天在此对nginx的使用做一简单总结. 一.nginx服务简介Nginx是一个高性能的HTTP和反向代理服务 ...

  3. [ios][opengles]OpenGL ES基础知识简介

    参考: http://www.cnblogs.com/shangdahao/archive/2011/11/05/2233587.html 3D变换:模型,视图,投影与Viewport: http:/ ...

  4. php面试笔记(5)-php基础知识-自定义函数及内部函数考点

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...

  5. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理(二) - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理(三) - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理(四) - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理(五) - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

随机推荐

  1. CONTAINING_RECORD 宏

    Windows中提供了一个宏 #define CONTAINING_RECORD (address, type, field ) ((type *)( \ (PCHAR)(address ) - \ ...

  2. Unity Skin Shader Optimized

    Shader "Skin Shader" { Properties { _MainTex ("Diffuse (RGB)", 2D) = "white ...

  3. UVa 993: Product of digits

    这道题很简单.先将N用2,3,5,7(即10以内的素数)分解因数(需要先特殊判断N不为1),然后将可以合并的因数合并(如2*2合并成4,)这样求得的结果位数会减少,大小肯定会小一些.具体实现见代码. ...

  4. Python调用C# Com dll组件实战

    之前公司有套C# AES加解密方案,但是方案加密用的是Rijndael类,而非AES的四种模式(ECB.CBC.CFB.OFB,这四种用的是RijndaelManaged类),Python下Crypt ...

  5. execl列数据成等差递增递减

    如上图若想以10,20,30...这样递增: 1).首先需选中10,20所在的单元格,鼠标移至20所在的单元格右下角 2).此时会出现一个十字"十"符号,点击直向下拖动至某个地方, ...

  6. Spring Boot中使用Lombok消除POJO类模板代码

    首先,要让IDE支持Lombok,这里以idea为例进行介绍. 点击项目的“File”-—>"settings"—>"Plugins",在marke ...

  7. 记一次坑爹的ORA-01152&amp;ORA-01110错误

    最近做RMAN还原时遇到了一次非常坑爹的ORA-01152&ORA-01110错误.遇到的具体错误信息如下所示: RMAN> alter database open resetlogs; ...

  8. PHP 高效导入导出Excel(csv)方法之fgetcsv()和fputcsv()函数

    CSV,是Comma Separated Value(逗号分隔值)的英文缩写,通常都是纯文本文件. 一.CSV数据导入函数fgetcsv() fgetcsv() 函数从文件指针中读入一行并解析 CSV ...

  9. 关于input=file的用法

    <input type="file"/>这个东西是用来上传图片用的. 1,但是存在一下问题但是在在各个浏览器下的显示是不一样的 IE下: IE之外的浏览器: 2.如果不 ...

  10. table固定首行(二)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...