JavaScript 随笔
js 内置 7种类型
基本类型: string number boolean null undefined symbol 引用类型: object
typeof 可判断除 null 外所有 基本类型
typeof null // 'object' //JS 的最初版本中 使用的是 32 位系统,为了性能考虑使用低位存储了变量的类型信息,000 开头代表是对象,然而 null 表示为全零,所以将它错误的判断为 object //undefined 不是保留字,能够在低版本浏览器被赋值 //判断一个值是否等于 undefined a === void 's'
可通过Object.prototype.toString.call() 判断一个变量的正确类型
类型转化
在条件判断时,除了 undefined, null, false, NaN, '', 0, -0,其他所有值都转为 true,包括所有对象。
对象在转换基本类型时,首先会调用 valueOf 然后调用 toString。并且两个方法可以重写
let a = {valueOf() {return 0;},toString() {return '1';},[Symbol.toPrimitive]() {//优先级最高return 2;} } a.valueOf() //0 a.toString() // '1' 1 + a // => 3 '1' + a // => '12'
操作符
加法运算会触发三种类型转换:将值转换为原始值,转换为数字,转换为字符串。
一方是字符串类型,会把另一个也转为字符串类型。
一方是数字, 另一方就转为数字。优先级 string>number
'1' + + '' //"10" '1' ++ '' //Error + '' //0
toPrimitive(obj)等价于:先计算obj.valueOf(),如果结果为原始值,则返回此结果;否则.计算obj.toString(),如果结果是原始值,则返回此结果;否则,抛出异常
比较运算符
如果是对象,就通过 toPrimitive 转换对象 如果是字符串,就通过 unicode 字符索引来比较
"=="规则
x,y 类型相同:x -> undefined //truex -> null //truex -> number x -> NaN //falsey -> NaN //falsex == y //truex -> +0 && y -> -0 //truex -> -0 && y -> +0 //truex -> string ,x和y 字符序列完全相同<长度相等,相同字符位置相同> //truex -> Boolean x&&y = true/false //true x和y 引用 同一对象 //true x -> null , y -> undefiend //true x -> undefiend , y -> null //true x -> number ,y -> string Number(y) ==>参考上文 x -> number x -> string , y ->number Number(x) ==> 参考上文 x -> number x -> Boolean Number(x) ==> 参考上文 x -> number y -> Boolean Number(y) ==> 参考上文 x -> number x -> string || number, y -> object x ==toPrimitive(y) x -> object && y ->string || number toPrimitive(x) ==y [] == ![] //右: ![] 转成 true,然后取反变成 false //左: ToPrimitive([]) == 0 // [].toString() -> '' //结果为true
Prototype
原型链:
![](/assets/blank.gif)
- 实例通过__proto__ 访问对应构造函数的原型 -> B.prototype
- 函数原型 通过__proto__ 访问Object的原型 -> Object.prototype
- Object的原型的__proto__ 指向 null
- 构造函数 Object.prototype 通过constructor访问构造函数本身 每个构造函数通过 prototype 访问原型
基本上所有函数都有这个属性 (只有函数才拥有prototype属性) ,有一个例外
let fun = Function.prototype.bind()
当声明一个函数时自动创建 prototype 属性, 这个属性的值是一个对象(也就是原型),只有一个属性 constructor;
constructor 是一个公有且不可枚举的属性。一旦我们改变了函数的 prototype ,那么新对象就没有这个属性了(当然可以通过原型链取到 constructor)。
function A(){} console.log(A.prototype) // {constructor: ƒ}constructor: ƒ A()__proto__: Object A.prototype="a" console.log(A.prototype) //"a"
constructor作用:
- 让实例对象知道是什么函数构造了它
- 如果想给某些类库中的构造函数增加一些自定义的方法,就可以通过 xx.constructor.method 来扩展
__proto__
每个对象都有的隐式原型属性,指向创建该对象的构造函数的原型,实际指向[[prototype]], 内部属性,我们并不能访问到所以使用 proto 来访问。
console.log({}) //__proto__: Objectconstructor: ƒ Object()hasOwnProperty: ....
当我们使用 new 操作符时,生成的实例对象拥有了 __proto__属性。
function Foo() {} // 这个函数是 Function 的实例对象 // function 就是一个语法糖 // 内部调用了 new Function(...)
所有对象都可以通过原型链最终找到 Object.prototype ,虽然 Object.prototype 也是一个对象,但是这个对象却不是 Object 创造的,而是引擎自己创建了 Object.prototype 。
所以可以这样说,所有实例都是对象,但是对象不一定都是实例。
首先引擎创建了 Object.prototype ,然后创建了 Function.prototype ,并且通过__proto__ 将两者联系了起来。
Function.prototype 以后才有了 function Function() ,然后其他的构造函数都是 function Function() 生成的。
函数通过 new Function() 生成, 不是所有函数都是 new Function() 产生的。
- Object 是所有对象的爸爸,所有对象都可以通过__proto__ 找到它
- Function 是所有函数的爸爸,所有函数都可以通过__proto__ 找到它
- Function.prototype 和 Object.prototype 是两个特殊的对象,他们由引擎来创建
- 除了以上两个特殊对象,其他对象都是通过构造器 new 出来的
- 函数的 prototype 是一个对象,也就是原型 对象的__proto__ 指向原型,__proto__将对象和原型连接起来组成了原型链
new 的过程
新生成了一个对象 链接到原型 绑定 this 返回新对象
function create() {// 创建一个空的对象let obj = new Object()// 获得构造函数let B = [].shift.call(arguments)// 链接到原型obj.__proto__ = B.prototype// 绑定 this,执行构造函数let result = B.apply(obj, arguments)// 确保 new 出来的是个对象return typeof result === 'object' ? result : obj }
实例对象,都是通过 new 产生的,无论是B() 还是obj 。
所有运算圆括号优先级最高 成员 - 计算 从左至右访问
new F1.getName(); //-->new (F1.name()); new F1().getName(); // -->(new F1()).name();
instanceof
可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype
。
function objType(left, right) {// 获得类型的原型let prototype = right.prototype// 获得对象的原型left = left.__proto__// 判断对象的类型是否等于类型的原型if (left === null)return falseif (prototype === left)return trueleft = left.__proto__}
执行上下文
当执行 JS 代码时,会产生三种执行上下文
- 全局执行上下文
- 函数执行上下文
- eval 执行上下文
arguments 是函数独有的对象(箭头函数没有)作用域链,可以把它理解成包含自身变量对象和上级变量对象的列表,通过 [[Scope]]
属性查找上级变量在生成执行上下文时,会有两个阶段。函数和变量提升第一个阶段是创建的阶段,JS 解释器会找出需要提升的变量和函数,并且给他们提前在内存中开辟好空间,函数的话会将整个函数存入内存中,变量只声明并且赋值为 undefined,第二个阶段,也就是代码执行阶段,我们可以直接提前使用。
在提升的过程中,相同的函数会覆盖上一个函数,并且函数优先于变量提升
b() // 1function b() {console.log('2') } function b() {console.log('1') } var b = 'Hello world'
转载于:https://www.cnblogs.com/gaoguowen/p/10082526.html
JavaScript 随笔相关推荐
- JavaScript随笔一篇
作者:Truly 日期:2007.7.31 近期Post了不少Javascript文章,还是收到不少支持,你们的回复是我写下去的动力,谢谢你们! 刚刚研究了一下新浪的财经板块,其中对股票数据的处理真的 ...
- [JavaScript 随笔] 一个 JS 框架需要做什么
学习再多,也是杯水车薪. 为什么这么说?不知道各位有没有发现,虽然前端发展快,但一些有名的框架至少会火热很长时间,比如 Backbone.React.Ember .如果有心要学,肯定有足够的时间把它学 ...
- JavaScript知识点查阅
1.JavaScript之闭包,给自己的Js一场重生(系列七) 2.JavaScript总结(快速入门,一篇就够了) 3.JavaScript基础(一篇入门) 4.3分钟让你明白JSON是什么 5.视 ...
- oracle 安装截图,ORACLE WIN7安装过程截图
Server.Transfer 和 Response.Redirect 用法区别 在ASP.NET中,在后台传值方式目前大多都是用 Response.Redirect("页面地址" ...
- 微型计算机中的pcl是指,PCL中的类
1. PCLBase pcl_base.h中定义了PCL中的基类PCLBase,PCL中的大部分算法都使用了其中的方法. PCLBase实现了点云数据及其索引的定义和访问. 两个主要的变量input_ ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- javascript学习随笔(编写浏览器脚本 Navigator Scripting )
在 HTML 中使用JavaScript JavaScript能以两种方式嵌入HTML: 作为语句和函数使用时,用 SCRIPT 标记 作为事件处理程序使用时,用 HTML 标记 SCRIPT 标记 ...
- JavaScript高级程序设计(第4版)学习随笔【第三章】
ECMAScript语法: 区分大小写 一切都区分大小写.无论是变量.函数名还是操作符都区分大小写 标识符(变量.函数.属性或函数参数的名称) 第一个字符必须是一个字母.下划线或美元符号$ 剩下的其他 ...
- javaScript高级程序设计-------总结随笔
一.JavaScript实现 JavaScript(JS)是由ECMAScirpt(ES).文件对象模型(DOM).浏览器对象模型(BOM)三部分组成,每部分的作用如下: ECMAScript: (3 ...
- JavaScript基础随笔
计算机语言指用于人与人之间通讯的语言 计算机语言的种类非常多,总的来说可以分成:机器语言,汇编语言,高级语言三大类 二进制是计算机语言的基础 通用汇编语言有两种形式:汇编语言和高级语言 汇编语言和机器 ...
最新文章
- MacBook Air写代码真香!包邮送一台!
- R可视化绘制对数正态分布(Log Normal Distribution)
- bugFree与zentao
- android 学习随笔二十(多媒体编程 )
- Git_git的诞生
- 【笔记】css 自定义select 元素的箭头样式
- springboot集成rocketmq消费者
- CodeForces - 1058A. In Search of an Easy Problem
- java运行构建期间出错_构建和运行Java 8支持
- 为什么移动硬盘的实际容量比标注容量小
- C语言中二维数组名与数组地址、首行地址、首行首元素地址关系与区别详解(初学者必须掌握)
- 视频时代的大数据:问题、挑战与解决方案
- 关于A+B+C问题4种语言的解决办法,Java、C语言、C++、Python
- 复杂版---JS获得某天是一年当中的第几天
- oracle 数据为当前月 查询结果为累计到当前月的数据_Oracle里的执行计划——使用explain plan命令...
- WebForm与MVC模式优缺点
- plugin工程及与flutter工程通信原理
- 电脑屏幕变黄如何调整_办公室照明设计如何避免踩坑,四个要点必须注意
- 使用javascript的“委托”实现attachEvent
- 【使用教程】面向回家编程-12306智能刷票,订票