Menu

  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay
  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay

JavaScript知识集锦

6
Jun
2005

JavaScript知识集锦

By Alex
/ in JavaScript
/ tags FAQ
0 Comments
ECMAScript 5.1

ECMAScript 5.1目前已经受到现代浏览器的广泛支持,本章内容介绍其新特性。

严格模式

在脚本文件或者函数体的第一行添加 'use strict'; 可以切换到严格模式。在此模式下JavaScript变得更加严谨、禁用某些特效、执行更多的检查、抛出更多的异常。严格模式造成的改变包括:

禁止全局变量的隐式声明

在正常模式下,不使用var声明的变量,自动作为全局变量。在严格模式下,所有变量必须通过var声明,否则报错

限制动态绑定上下文对象的能力

动态绑定允许在运行时确定上下文对象(函数、变量所属的对象),启用严格模式时:

  1. 禁止使用with语句来动态指定上下文对象
  2. 在全局作用域、函数作用域之外,创建新的Eval作用域。 eval() 调用在Eval作用域中发生,其声明的变量对此调用外部均不可见

禁止函数体中this指向全局对象

JavaScript
1
2
3
4
5
function hello() {
    'use strict';
    console.log( this ); // undefined
}
hello();

这样,调用构造函数时忘记使用new操作符,不会导致this意外的指向Global对象 

禁止删除属性

默认的,在严格模式下你不能删除对象的属性,例如 delete obj.prop 会报错。除非声明目标属性的 configurable: true ,例如:

JavaScript
1
2
3
4
5
6
7
'use strict';
var obj = Object.create( null, {
    'prop': {
        configurable: true
    }
} );
delete obj.prop; // OK

禁止定义重名的属性

在正常模式下,定义重名的属性会导致最后一个覆盖前面的定义,严格模式下则报错

禁止定义重名的形参

在正常模式下,两个形参名字一样是允许的,可以通过arguments数组访问,严格模式下则报错

禁止0开头的八进制表示法

更多的错误信息

正常模式下,某些失败的操作仅仅被简单的忽略,在严格模式下则会导致报错。例如:

  1. 尝试写入只读变量:
    JavaScript
    1
    2
    3
    4
    5
    'use strict';
    Object.defineProperty( this, 'prop', {
        writable: false
    } );
    this.prop = 1; // TypeError: Cannot assign to read only property 'prop' of #<Object> 
  2. 对仅仅有getter没有setter的属性进行赋值:
    JavaScript
    1
    2
    3
    4
    5
    'use strict';
    var obj = {
        get prop(){},
    }
    obj.prop = 1; // Cannot set property prop of #<Object> which has only a getter 
  3. 对禁止扩展的对象增加属性:
    JavaScript
    1
    2
    3
    4
    'use strict';
    var obj = {}
    Object.preventExtensions( obj );
    obj.prop = 1; // TypeError: Can't add property prop, object is not extensible

限制arguments对象

  1. arguments这个关键字不得用作变量名、函数名
  2. arguments数组变成实参的快照,对其修改不会生效。在正常模式下是可以修改的
  3. 禁止使用arguments.callee。这导致匿名函数无法递归调用自己

函数声明位置限制

严格模式下,函数要么声明在全局作用域,要么声明在函数作用域的最外层:

JavaScript
1
2
3
if (true) {
    function hello() { } // 语法错误
}

更多的保留字

包括:implements, interface, let, package, private, protected, public, static, yield。这些保留字不得用于变量名

注:即使在正常模式下,class, enum, export, extends, import, super也是ECMAscript 5的保留字

访问器语法(Getter/Setter)

这种新语法允许你为某个属性定义getter/setter,这样取值、赋值时实际上会调用这些Getter/Setter,而不是直接操控属性字段:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var person = {
    get name() {
        return this._name;
    },
    set name( name ) {
        console.log( 'Changing name to ' + name );
        // 不能用this.name,会导致无限递归
        this._name = name;
    }
}
person.name = 'Alex'; // 打印 Changing name to Alex
语法上的其它改变
保留字可以作为属性名
JavaScript
1
2
var obj = { new: null }
obj.new = 1;
对象/数组直接结尾的逗号合法化
JavaScript
1
2
var obj = { new: null, }
var array = [,]
多行字符串合法化
JavaScript
1
2
3
4
5
var LINES = '1\
2345\
6789\
';
console.log( LINES.length ); // 9
允许通过下标访问字符串中的单个字符
JavaScript
1
2
var str = '12345';
console.log( str[ 1 ] );
标准库的改变

JavaScript标准库的完整内容可以参考MDN。

元编程支持

注意依赖于Object类上新定义的一系列静态方法:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* 读写原型对象 */
// 创建一个新的对象。第一个参数用于指定其原型对象;第二个参数用于指定属性名到描述符的映射
obj = Object.create( proto, props );
// 获取一个对象的原型对象
proto = Object.getPrototypeOf( obj );
 
/* 通过属性描述符来操控属性 */
obj = Object.create( proto, props );  //创建新对象
// 为obj定义名为prop的属性,使用描述符desc
Object.defineProperty( obj, prop, desc );
//示例
Object.defineProperty({},'name',{
    value:'anonymous',  // 默认值
    writable: false,    // 是否可以写入属性值
    configurable:false, // 是否允许后续配置,如果否,则禁止修改writable、configurable、enumerable特性,禁止删除属性
    enumerable:true ,   // 是否允许在for .. in循环中枚举出此属性
    get:function(){} ,  // 读访问器
    set:function(){} ,  // 写访问器
});
// 为obj定义多个属性
Object.defineProperties( obj, props );
// 得到obj对象的name属性的描述符
desc = Object.getOwnPropertyDescriptor( obj, 'name' );
 
/* 属性迭代 */
// 返回所有可枚举自身属性(不包括继承自原型链的)组成的数组,属性名排序与for..in循环一致
array = Object.keys( obj );
// 与上面类似,但是包括不可枚举属性
Object.getOwnPropertyNames();
 
/* 对象保护 */
// 禁止添加新属性
Object.preventExtensions( obj );
// 判断是否允许扩展
Object.isExtensible( obj );
// 密封一个对象,此后该对象不支持添加、删除属性,也不能对已有属性进行配置
obj = Object.seal( obj );
// 判断obj是否是密封对象
Object.isSealed( obj );
// 冻结一个对象,在密封的基础上,禁止修改属性值
Object.freeze( obj );
// 判断obj是否是冻结对象
Object.isFrozen( obj );
字符串API 

新添加一个 String.prototype.trim() 方法,可以删除字符串开头、结尾的空白字符。 

日期API

新增加 Date.now() 和 Date.prototype.toISOString() 两个方法。

函数API

新增加 Function.prototype.bind() 方法,可以把一个函数、附加调用参数绑定为一个新函数:

JavaScript
1
2
3
4
5
function sayHello( who ) {
    console.log( 'Hello ' + who );
}
var sayHelloToAlex = sayHello.bind(this,'Alex');
sayHelloToAlex(); // Hello Alex
数组API
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 静态方法of,将多个对象组合为数组
var array = Array.of( 1, 2, 3 );
console.log( array );  // [ 1, 2, 3 ]
 
// 判断是否所有元素均能通过测试
array.every( function ( e ) {
    return !isNaN( e );
} );
// 判断是否至少一个元素均能通过测试
array.some( function ( e ) {
    return !isNaN( e );
} );
 
// 过滤数组元素,返回满足回调元素组成的新数组
var newarray = array.filter( function ( e ) {
    return e > 1;
} )
 
// 遍历当前时刻数组包含的所有元素,被删除、未赋值(undefined)被自动跳过
array.forEach( function () {
    console.log( e );
} )
// 搜索元素出现的索引,使用严格比较(===,即值相等且类型相同)
array.indexOf( 1 );
array.lastIndexOf( 3 );
 
// 针对每一个元素执行回调,由回调结果组成新数组
array.map( function ( e ) {
    return ++e;
} );
// 指定一个累加器回调,从第一个元素开始调用回调,当前元素currentValue,上一次累加值为previousValue
// 初始的累加值被设置为0
array.reduce( function ( previousValue, currentValue, index, array ) {
    return previousValue + currentValue;
}, 0 );
JSON API

JSON.parse()  用于解析字符串为JavaScript对象, JSON.stringify() 则将JavaScript对象转换为字符串。Boolean、Number、String、Date等类型添加了 toJSON() 方法。

JSONPath
语法
记号 说明
$ 根节点
@ 当前节点
.或者[] 子节点
.. 所有符合条件的后代节点
* 所有节点
[] 迭代器标示,例如数组下标
[,] 支持迭代器中进行多选
[start:end:step] 数组切片
?() 过滤操作
() 进行表达式计算
基础知识
对象基础知识

JavaScrit对象都具有以下几个特性:

  1. 对象的原型(Prototype),原型本身是一个对象。当前对象从原型对象继承属性、方法。Object.prototype对象没有原型
  2. 对象的类型(Class),标记了对象的类别的字符串

对象可以分为以下几类:

  1. 内置对象(Native Object),由JavaScript语言定义的类型和对象,包括数组、函数、日期、正则式等
  2. 宿主对象(Host Object),由JavaScript解释器的宿主环境定义的类型和对象,例如Web浏览器定义的window
  3. 自定义对象,由JavaScript代码定义的类型和对象

对象的属性/方法可以分为:

  1. 自有属性(Own property),直接在对象中定义的属性
  2. 继承属性(Inherited property),通过原型链继承得到的属性
对象的创建

可以使用以下方式创建对象:

  1. 对象直接量语法: {} ,等价于 new Object() 
  2. ES5引入的 Object.create() 调用
  3. new 关键字,后面跟着作为构造函数的函数调用
构造函数于原型

任何函数都可以作为构造函数使用,只要在调用时,附加 new 关键字。在构造函数里可以使用 this 关键字访问当前正被构建的对象。

构造函数的 prototype 属性指向一个对象,该对象即为通过此函数构造出的对象的原型对象:

JavaScript
1
2
3
4
5
6
7
8
9
10
function Fruit() {
 
};
// 你可以直接设置prototype的属性,但是,如果你将其赋值为新的对象
Fruit.prototype = {
    typeId: 1
};
// 则一定要把此新对象的constructor设置为构造函数
Fruit.prototype.constructor = Fruit;
console.log( new Fruit().typeId );

注意:尝试给内置类型(例如Array)的构造函数设置原型对象,可能无效。

构造函数的原型对象,可以设置为另外一个构造函数的原型对象,这样就可以形成“继承”。按照这种方式,一个原型可以有父原型、祖父原型……形成一个原型链条。原型继承(拷贝)来自祖代原型的属性、方法,自己可以覆盖之,或者定义新的属性、方法。

对于来自通过原型继承的、对象类型的属性,需要特别注意,继承的时候拷贝的是引用:

JavaScript
1
2
3
4
5
6
7
Fruit.prototype = {
    seeds: []
};
Fruit.prototype.constructor = Fruit;
var f0 = new Fruit();
f0.seeds.push( 1 );
console.log( new Fruit().seeds ); // [ 1 ] 所有对象使用的是一个数组
常用代码片断
修改表单字段占位符
JavaScript
1
2
// jQuery代码
field.attr("placeholder", "new placeholder content");
常见问题
运算符delete的作用

delete运算符在JavaScript中的作用是删除某个对象的属性(方法),不要与C++中的delete运算符混淆,后者用于清除指针指向的内存空间。

JavaScript
1
2
3
4
5
6
7
8
var person = {
    name: 'Alex',
    age : 20
};
delete person.age;
console.log(person.age);  //undefined
 
delete person;   //false,无法删除普通变量

此外需要注意,delete只是删除属性,属性指向的对象不会被删除,没有引用的对象会被垃圾回收器处理。

Function的call和apply方法有何区别
JavaScript
1
2
3
4
5
6
7
8
9
10
function plus (a, b){
    return a + b;
}
// 在ECMAScript5的严格模式中,call()和apply()的第一个实参都会变为this的值,哪怕传入的实参是原始值甚至是null或undefined
// 在ECMAScript3和非严格模式中,传入的null和undefined都会被全局对象代替,而其他原始值则会被相应的包装对象所替代
 
//第二个开始,逐个传入参数
plus.call(this, 1, 2);
//第二个参数是实参的数组
plus.apply(this, [1, 2]);
IE浏览器iframe内存泄漏的处理

在Iframe的unload期间,添加类似如下代码:

JavaScript
1
2
3
4
5
6
7
8
9
if ( Ext.isIE )
{
    console.log( 'Cleaning up IE iframes...' );
    var iframe = me.getFrame();
    iframe.src = 'about:blank'
    iframe.contentWindow.document.write( '' )
    CollectGarbage && CollectGarbage();
    iframe.parentNode.removeChild( iframe );
}
浏览器中运行的JavaScript的特点
浏览器JavaScript单线程性

JavaScript引擎是单线程运行的, 浏览器无论在什么时候都有且只有一个线程在运行JavaScript程序

浏览器JavaScript线程与GUI渲染线程的互斥性

在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的。某些实现下,这两者就是一个线程。

浏览器JavaScript线程一个个的获取并执行任务队列

如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的

浏览器至少存在三大常驻线程

javascript引擎线程、界面渲染线程、浏览器事件触发线程

← Windows命令知识集锦
C语言学习笔记 →

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Related Posts

  • Framework7知识集锦
  • ExtJS知识集锦
  • JDBC知识集锦
  • Java知识集锦
  • Windows命令知识集锦

Recent Posts

  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
  • A Comprehensive Study of Kotlin for Java Developers
  • 背诵营笔记
  • 利用LangChain和语言模型交互
  • 享学营笔记
ABOUT ME

汪震 | Alex Wong

江苏淮安人,现居北京。目前供职于腾讯云,专注容器方向。

GitHub:gmemcc

Git:git.gmem.cc

Email:gmemjunk@gmem.cc@me.com

ABOUT GMEM

绿色记忆是我的个人网站,域名gmem.cc中G是Green的简写,MEM是Memory的简写,CC则是我的小天使彩彩名字的简写。

我在这里记录自己的工作与生活,同时和大家分享一些编程方面的知识。

GMEM HISTORY
v2.00:微风
v1.03:单车旅行
v1.02:夏日版
v1.01:未完成
v0.10:彩虹天堂
v0.01:阳光海岸
MIRROR INFO
Meta
  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
Recent Posts
  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
    In this blog post, I will walk ...
  • A Comprehensive Study of Kotlin for Java Developers
    Introduction Purpose of the Study Understanding the Mo ...
  • 背诵营笔记
    Day 1 Find Your Greatness 原文 Greatness. It’s just ...
  • 利用LangChain和语言模型交互
    LangChain是什么 从名字上可以看出来,LangChain可以用来构建自然语言处理能力的链条。它是一个库 ...
  • 享学营笔记
    Unit 1 At home Lesson 1 In the ...
  • K8S集群跨云迁移
    要将K8S集群从一个云服务商迁移到另外一个,需要解决以下问题: 各种K8S资源的迁移 工作负载所挂载的数 ...
  • Terraform快速参考
    简介 Terraform用于实现基础设施即代码(infrastructure as code)—— 通过代码( ...
  • 草缸2021
    经过四个多月的努力,我的小小荷兰景到达极致了状态。

  • 编写Kubernetes风格的APIServer
    背景 前段时间接到一个需求做一个工具,工具将在K8S中运行。需求很适合用控制器模式实现,很自然的就基于kube ...
  • 记录一次KeyDB缓慢的定位过程
    环境说明 运行环境 这个问题出现在一套搭建在虚拟机上的Kubernetes 1.18集群上。集群有三个节点: ...
  • eBPF学习笔记
    简介 BPF,即Berkeley Packet Filter,是一个古老的网络封包过滤机制。它允许从用户空间注 ...
  • IPVS模式下ClusterIP泄露宿主机端口的问题
    问题 在一个启用了IPVS模式kube-proxy的K8S集群中,运行着一个Docker Registry服务 ...
  • 念爷爷
      今天是爷爷的头七,十二月七日、阴历十月廿三中午,老人家与世长辞。   九月初,回家看望刚动完手术的爸爸,发

  • 6 杨梅坑

  • liuhuashan
    深圳人才公园的网红景点 —— 流花山

  • 1 2020年10月拈花湾

  • 内核缺陷触发的NodePort服务63秒延迟问题
    现象 我们有一个新创建的TKE 1.3.0集群,使用基于Galaxy + Flannel(VXLAN模式)的容 ...
  • Galaxy学习笔记
    简介 Galaxy是TKEStack的一个网络组件,支持为TKE集群提供Overlay/Underlay容器网 ...
TOPLINKS
  • Zitahli's blue 91 people like this
  • 梦中的婚礼 64 people like this
  • 汪静好 61 people like this
  • 那年我一岁 36 people like this
  • 为了爱 28 people like this
  • 小绿彩 26 people like this
  • 彩虹姐姐的笑脸 24 people like this
  • 杨梅坑 6 people like this
  • 亚龙湾之旅 1 people like this
  • 汪昌博 people like this
  • 2013年11月香山 10 people like this
  • 2013年7月秦皇岛 6 people like this
  • 2013年6月蓟县盘山 5 people like this
  • 2013年2月梅花山 2 people like this
  • 2013年淮阴自贡迎春灯会 3 people like this
  • 2012年镇江金山游 1 people like this
  • 2012年徽杭古道 9 people like this
  • 2011年清明节后扬州行 1 people like this
  • 2008年十一云龙公园 5 people like this
  • 2008年之秋忆 7 people like this
  • 老照片 13 people like this
  • 火一样的六月 16 people like this
  • 发黄的相片 3 people like this
  • Cesium学习笔记 90 people like this
  • IntelliJ IDEA知识集锦 59 people like this
  • 基于Kurento搭建WebRTC服务器 38 people like this
  • Bazel学习笔记 37 people like this
  • PhoneGap学习笔记 32 people like this
  • NaCl学习笔记 32 people like this
  • 使用Oracle Java Mission Control监控JVM运行状态 29 people like this
  • Ceph学习笔记 27 people like this
  • 基于Calico的CNI 27 people like this
Tag Cloud
ActiveMQ AspectJ CDT Ceph Chrome CNI Command Cordova Coroutine CXF Cygwin DNS Docker eBPF Eclipse ExtJS F7 FAQ Groovy Hibernate HTTP IntelliJ IO编程 IPVS JacksonJSON JMS JSON JVM K8S kernel LB libvirt Linux知识 Linux编程 LOG Maven MinGW Mock Monitoring Multimedia MVC MySQL netfs Netty Nginx NIO Node.js NoSQL Oracle PDT PHP Redis RPC Scheduler ServiceMesh SNMP Spring SSL svn Tomcat TSDB Ubuntu WebGL WebRTC WebService WebSocket wxWidgets XDebug XML XPath XRM ZooKeeper 亚龙湾 单元测试 学习笔记 实时处理 并发编程 彩姐 性能剖析 性能调优 文本处理 新特性 架构模式 系统编程 网络编程 视频监控 设计模式 远程调试 配置文件 齐塔莉
Recent Comments
  • qg on Istio中的透明代理问题
  • heao on 基于本地gRPC的Go插件系统
  • 黄豆豆 on Ginkgo学习笔记
  • cloud on OpenStack学习笔记
  • 5dragoncon on Cilium学习笔记
  • Archeb on 重温iptables
  • C/C++编程:WebSocketpp(Linux + Clion + boostAsio) – 源码巴士 on 基于C/C++的WebSocket库
  • jerbin on eBPF学习笔记
  • point on Istio中的透明代理问题
  • G on Istio中的透明代理问题
  • 绿色记忆:Go语言单元测试和仿冒 on Ginkgo学习笔记
  • point on Istio中的透明代理问题
  • 【Maven】maven插件开发实战 – IT汇 on Maven插件开发
  • chenlx on eBPF学习笔记
  • Alex on eBPF学习笔记
  • CFC4N on eBPF学习笔记
  • 李运田 on 念爷爷
  • yongman on 记录一次KeyDB缓慢的定位过程
  • Alex on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • haolipeng on 基于本地gRPC的Go插件系统
  • 吴杰 on 基于C/C++的WebSocket库
©2005-2025 Gmem.cc | Powered by WordPress | 京ICP备18007345号-2