资讯专栏INFORMATION COLUMN

「JS篇」你不知道的 JS 知识点总结(一)

JouyPub / 2438人阅读

摘要:调用栈就是为了到达当前执行位置所调用到的所用函数。方法测试是否至少有一个元素通过由提供的函数实现的测试返回值是终止。然而,如果存在于原型链上层,赋值语句的行为就会有些不同而且可能很出人意料。

typeof null 为 ”object” 解释

不同的对象在底层都表示为二进制,在JavaScript中二进制前三位都为0的话会被判断为object类型,null 的二进制表示都是0,自然前三位都是0,所以执行 typeof null 时,会返回 ”object”。

传统编程语言编译的三个步骤

分词/词法分析

解析/语法分析

代码生成

变量的赋值操作

编译阶段 -- 首次编译器会在当前作用域中声明一个变量(变量提升),如果之前没用声明过。

运行阶段 -- 运行时引擎会在作用中查找该变量,如果能够找到就会对它赋值(LHS查询。

作用域

作用域是一套规则,用于确定在何处以及如何查找变量。

如果查找的目的是对变量赋值,那么就会使用 LHS 查询。

如果查找的目的是获取变量的值,那么就会使用 RHS 查询。

无论函数在哪里被调用,也无论它如何被调用,它的词法作用域都只由函数被声明时所处的位置决定。

闭包

当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这时就产生了闭包。

this

this 在任何情况下都不指向函数的词法作用域。

在 JavaScript 中作用域确实和对象类似,可见的标识符都是它的属性。

但是作用域“对象”无法通过 JavaScript 代码访问,它存在 JavaScript 引擎的内部。

this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调 用时的各种条件。

this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。

当一个函数被调用时,会创建一个活动记录(有时也称为执行上下文)。

这个记录会包含函数在哪里被调用(调用栈),函数的调用方法,传入的参数等信息。this 就是记录其中的一个属性,会在函数执行的过程中用到。

this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。

调用栈 — 就是为了到达当前执行位置所调用到的所用函数。

bind()

会返回一个硬编码的新函数,它会把参数设置为 this 的上下文并调用原始函数。

new 操作符

使用 new 来调用函数时,会自动执行下面的操作:

创建一个新的空对象;

这个对象会被执行[[原型]]连接;

这个新对象会绑定到函数调用的 this;

如果函数没用返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象。

判断 this

可以根据下面的顺序来进行判断:

函数是否在 new 中调用(new绑定)如果是的话,this 是绑定的是新创建的对象。

var bar = new foo();

函数是否是通过 call apply (显示绑定)或者硬绑定调用,如果是的话,this绑定的是指定的对象。

var bar = foo.call(obj2);

函数是否在某个上下文对象中调用(隐式调用),如果是的话,this绑定的是那个上下文对象。

var bar = obj.foo();

若果都不是的话,使用默认绑定,如果在严格模式下,就绑定到 undefined,否则绑定到全局对象上。

var bar = foo();

ES6 新增可计算属性名
var prefix = "foo";
var myObject = {
  [prefix + "bar"]: "hello",
  [prefix + "baz"]: "world" 
}

myObject["foobar"]; // hello

myObject["foobaz"]; // world
in / hasOwnProperty() -- 判断某个对象是否存在某个属性

in 操作符会检查属性是否在对象及其 [[Prototype]] 原型链中。

hasOwnProperty() 只会检查属性是否在 myObject 对象中,不会检查 [[Prototype]] 链。

forEach() / every() / sone() -- 历数组的值

forEach() 会遍历数组中的所有值并忽略回调函数的返回值(忽略返回值)。

every() 方法测试数组的所有元素是否都通过了指定函数的测试(返回值是false终止)。

some() 方法测试是否至少有一个元素通过由提供的函数实现的测试(返回值是true终止)。

for...in -- 遍历数组下标/对象可枚举属性

不保证 key 顺序。

for...of -- 遍历可迭代对象的值

在可迭代对象上(包括 Array,Map,Set,String,TypedArray,arguments
对象等)上创建一个迭代循环,调用自定义迭代钩子自定义的 @@iterator 对象 ,并为每个不同属性的值执行语句。

var randoms = {
        
    [Symbol.iterator]: function() { 
        return {
                
            next: function() {
                return { 
                    value: Math.random() 
                }; 
            } 
        };
    } 
}; 
var randoms_pool = []; 
for (var n of randoms) { 
    randoms_pool.push( n );
    // 防止无限运行! 
    if (randoms_pool.length === 100) break; 
} 
类的继承和多态

多态并不表示子类和父类有关联,子类得到的只是父类的一份副本,类的继承其实就是复制。

属性的设置和屏蔽
var myObject = {};
  
myObject.foo = "bar";

如果 myObject 对象中包含名为 foo 的普通数据访问属性,这条赋值语句只会修改已有的属性值。

如果 foo 不是直接存在于 myObject 中,[[Prototype]] 链就会被遍历,类似 [[Get]] 操作。

如果原型链上找不到 foo,foo 就会被直接添加到 myObject 上。

然而,如果 foo 存在于原型链上层,赋值语句 myObject.foo = "bar" 的行为就会有些不同 (而且可能很出人意料)。

如果属性名 foo 既出现在 myObject 中也出现在 myObject 的 [[Prototype]] 链上层,那 么就会发生屏蔽。

myObject 中包含的 foo 属性会屏蔽原型链上层的所有 foo 属性,因为 myObject.foo 总是会选择原型链中最底层的
foo 属性。

转载请注明出处,如果想要了解更多,请搜索微信公众号:webinfoq。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103886.html

相关文章

  • 你不知道h5

    摘要:目前,常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性,同时在项目中也会遇到一些命名的瓶颈。 基于 Three.js 的超快的 3D 开发框架:Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

    IntMain 评论0 收藏0
  • 前端相关大杂烩

    摘要:希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎,由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时,老司机们首先就会告诉你其实是个没有网络请求功能的库。 前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    dailybird 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    hellowoody 评论0 收藏0

发表评论

0条评论

JouyPub

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<