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

原型链:

  1. 实例通过__proto__ 访问对应构造函数的原型 -> B.prototype
  2. 函数原型 通过__proto__ 访问Object的原型 -> Object.prototype
  3. Object的原型的__proto__ 指向 null
  4. 构造函数 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() 产生的。


  1. Object 是所有对象的爸爸,所有对象都可以通过__proto__ 找到它
  2. Function 是所有函数的爸爸,所有函数都可以通过__proto__ 找到它
  3. Function.prototype 和 Object.prototype 是两个特殊的对象,他们由引擎来创建
  4. 除了以上两个特殊对象,其他对象都是通过构造器 new 出来的
  5. 函数的 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 随笔相关推荐

  1. JavaScript随笔一篇

    作者:Truly 日期:2007.7.31 近期Post了不少Javascript文章,还是收到不少支持,你们的回复是我写下去的动力,谢谢你们! 刚刚研究了一下新浪的财经板块,其中对股票数据的处理真的 ...

  2. [JavaScript 随笔] 一个 JS 框架需要做什么

    学习再多,也是杯水车薪. 为什么这么说?不知道各位有没有发现,虽然前端发展快,但一些有名的框架至少会火热很长时间,比如 Backbone.React.Ember .如果有心要学,肯定有足够的时间把它学 ...

  3. JavaScript知识点查阅

    1.JavaScript之闭包,给自己的Js一场重生(系列七) 2.JavaScript总结(快速入门,一篇就够了) 3.JavaScript基础(一篇入门) 4.3分钟让你明白JSON是什么 5.视 ...

  4. oracle 安装截图,ORACLE WIN7安装过程截图

    Server.Transfer 和 Response.Redirect 用法区别 在ASP.NET中,在后台传值方式目前大多都是用 Response.Redirect("页面地址" ...

  5. 微型计算机中的pcl是指,PCL中的类

    1. PCLBase pcl_base.h中定义了PCL中的基类PCLBase,PCL中的大部分算法都使用了其中的方法. PCLBase实现了点云数据及其索引的定义和访问. 两个主要的变量input_ ...

  6. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  7. javascript学习随笔(编写浏览器脚本 Navigator Scripting )

    在 HTML 中使用JavaScript JavaScript能以两种方式嵌入HTML: 作为语句和函数使用时,用 SCRIPT 标记 作为事件处理程序使用时,用 HTML 标记 SCRIPT 标记 ...

  8. JavaScript高级程序设计(第4版)学习随笔【第三章】

    ECMAScript语法: 区分大小写 一切都区分大小写.无论是变量.函数名还是操作符都区分大小写 标识符(变量.函数.属性或函数参数的名称) 第一个字符必须是一个字母.下划线或美元符号$ 剩下的其他 ...

  9. javaScript高级程序设计-------总结随笔

    一.JavaScript实现 JavaScript(JS)是由ECMAScirpt(ES).文件对象模型(DOM).浏览器对象模型(BOM)三部分组成,每部分的作用如下: ECMAScript: (3 ...

  10. JavaScript基础随笔

    计算机语言指用于人与人之间通讯的语言 计算机语言的种类非常多,总的来说可以分成:机器语言,汇编语言,高级语言三大类 二进制是计算机语言的基础 通用汇编语言有两种形式:汇编语言和高级语言 汇编语言和机器 ...

最新文章

  1. MacBook Air写代码真香!包邮送一台!
  2. R可视化绘制对数正态分布(Log Normal Distribution)
  3. bugFree与zentao
  4. android 学习随笔二十(多媒体编程 )
  5. Git_git的诞生
  6. 【笔记】css 自定义select 元素的箭头样式
  7. springboot集成rocketmq消费者
  8. CodeForces - 1058A. In Search of an Easy Problem
  9. java运行构建期间出错_构建和运行Java 8支持
  10. 为什么移动硬盘的实际容量比标注容量小
  11. C语言中二维数组名与数组地址、首行地址、首行首元素地址关系与区别详解(初学者必须掌握)
  12. 视频时代的大数据:问题、挑战与解决方案
  13. 关于A+B+C问题4种语言的解决办法,Java、C语言、C++、Python
  14. 复杂版---JS获得某天是一年当中的第几天
  15. oracle 数据为当前月 查询结果为累计到当前月的数据_Oracle里的执行计划——使用explain plan命令...
  16. WebForm与MVC模式优缺点
  17. plugin工程及与flutter工程通信原理
  18. 电脑屏幕变黄如何调整_办公室照明设计如何避免踩坑,四个要点必须注意
  19. 使用javascript的“委托”实现attachEvent
  20. 【使用教程】面向回家编程-12306智能刷票,订票

热门文章

  1. thinkphp建站-前后台文件配置
  2. 功能自动化接入持续集成方案
  3. Objective-C 相关Category
  4. 关于DYNPRO程序的系统迁移与版本不匹配问题之一
  5. postgresql查看表的创建者和表的权限
  6. TensorFlow 学习------第一天
  7. ACL 2021 | 预训练模型的改进与应用
  8. 【追一科技】AAAI、ACL、EMNLP等顶会论文成果分享
  9. 【GitHub】知识蒸馏从入门到精通
  10. nlp-paper: 按主题分类的自然语言处理文献大列表