22.1 高级函数
  22.1.1 安全的类型检测
  22.1.2 作用域安全的构造函数
  22.1.3 惰性载入函数
  22.1.4 函数绑定
  22.1.5 函数柯里化
22.2 防篡改对象
  22.2.1 不可扩展对象
  22.2.2 密封的对象
  22.2.3 冻结的对象
22.3 高级定时器
  22.3.1 重复的定时器
  22.3.2 Yielding Processes
  22.3.3 函数节流
22.4 自定义事件
22.5 拖放
  22.5.1 修缮拖动功能
  22.5.2 添加自定义事件

22.1.1 安全的类型检测

function isArray(value){
return Object.prototype.toString.call(value) == "[object Array]";
}
function isFunction(value){
return Object.prototype.toString.call(value) == "[object Function]";
}
function isRegExp(value){
return Object.prototype.toString.call(value) == "[object RegExp]";
}

22.1.2 作用域安全的构造函数
在这里this 被解析成了window对象。由于window 的name 属性是用于识别链接目标和frame 的

function Person(name, age, job){
if (this instanceof Person){
this.name = name;
this.age = age;
this.job = job;
} else {
return new Person(name, age, job);
}
}
var person1 = Person("Nicholas", 29, "Software Engineer");
alert(window.name); //""
alert(person1.name); //"Nicholas"
var person2 = new Person("Shelby", 34, "Ergonomist");
alert(person2.name); //"Shelby"

如果你使用构造函数窃取模式的继承且不使用原型链,那么这个继承很可能被破坏。
如果构造函数窃取结合使用原型链或者寄生组合则可以解决这个问题。考虑以下例子:

function Polygon(sides){
if (this instanceof Polygon) { //如果把判断去掉,不用加粗的那段就可以找到side
this.sides = sides;
this.getArea = function(){
return 0;
};
} else {
return new Polygon(sides);
}
} function Rectangle(width, height){
Polygon.call(this, 2);
//this 对象并非Polygon 的实例,所以会创建并返回一个新的Polygon 对象。
//Rectangle 构造函数中的this 对象并没有得到增长,同时Polygon.call()返回的值也没有用到,
//所以Rectangle 实例中就不会有sides 属性。
this.width = width;
this.height = height;
this.getArea = function(){
return this.width * this.height;
};
} Rectangle.prototype = new Polygon();
var rect = new Rectangle(5, 10);
alert(rect.sides); //

22.1.3 惰性载入函数(有两种方式,我更喜欢这一种)

function createXHR(){
if (typeof XMLHttpRequest != "undefined"){
createXHR = function(){
return new XMLHttpRequest();
};
} else if (typeof ActiveXObject != "undefined"){
createXHR = function(){
if (typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i, len;
for (i=0,len=versions.length; i < len; i++){
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex){
//skip
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
};
} else {
createXHR = function(){
throw new Error("No XHR object available.");
};
}
return createXHR();
}

22.1.4 函数绑定

var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
} var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message);
}
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", handler.handleClick);

alert出来的到底是什么呢?
这个问题在于没有保存
handler.handleClick()的环境,所以this 对象最后是指向了DOM按钮而非handler
bind:
ECMAScript 5 为所有函数定义了一个原生的bind()方法,IE9+、Firefox 4+和Chrome。

var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message + ":" + event.type);
}
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler));

自定义:

function bind(fn, context){
return function(){
return fn.apply(context, arguments);
};
} var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message + ":" + event.type);
}
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler));

《javascript高级程序设计》第22章 高级技巧的更多相关文章

  1. 《JavaScript高级程序设计》——第二章在HTML使用JavaScript

    这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性.书中详细讲了async.defer.src和type四个<script>的属性. 下面是对第 ...

  2. javascript高级程序设计第5章,引用类型

    object类型: 创建object实列的方式有两种,一种是new()方法,一种是对象字面量表示法: 第一种法方:  var obj = new object(); obj.name = 'name' ...

  3. JavaScript 高级程序设计 第5章引用类型 笔记

    第五章 引用类型 一.object类型 1.创建方法: 1.使用new 操作符创建 var person=new object() Person.name=”Nicholasa” Porson.age ...

  4. JavaScript高级程序设计第20章JSON 笔记 (学习笔记)

    第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5  表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”ag ...

  5. JavaScript高级程序设计第14章表单脚本 (学习笔记)

    第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...

  6. 《JAVASCRIPT高级程序设计》第一章

    在使用调制解调器的时代,频繁的表单验证对客户端来说是一个很大的负担,javascript,作为一种专门进行表单验证的客户端脚本语言诞生了.到今天,javascript早已超越了当初设定的角色.Java ...

  7. JavaScript高级程序设计 第三章 基本概念

    ch3 基本概念 标签(空格分隔): JavaScript 语法 标识符 - 第一个字符必须是字母.下划线或美元 - 驼峰大小写格式 严格模式 ECMAScript5引入,定义了一种解析和执行模型.此 ...

  8. 《JavaScript 高级程序设计》第一章:简介

    JavaScript 历史 JavaScript的诞生的主要是当时的 netspace 公司谋求为自己的浏览器 Navigator 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...

  9. 《JavaScript高级程序设计》笔记:高级技巧

    高级函数 安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串.每个类在内部都有一个[[Cla ...

  10. javascript权威指南第22章高级技巧

    HTML <!DOCTYPE html> <html> <head> </head> <body> <div style=" ...

随机推荐

  1. Cheatsheet: 2013 10.09 ~ 10.23

    Other 10 Basic Linux Networking and Monitoring Commands You Should Know A simple, portable yet effic ...

  2. C#登录窗口及验证(+SQL)

    团队成员及分工 团队: Blue 团队共有六人 姓名:     学号后四位:       贡献分: 张   宇(队长)  1152          1+1.7=2.7分 丁志愿          1 ...

  3. CG绘画笔记

    看一些比较好的作品:看作品哪些部分,部件,盔甲比较吸引人,提取一个比较好的点,进行组合创作. 逆光.切光布局构图 创作:故事.情感.经历.朋友.时代 灵感: 电影.音乐 变化(色彩)透视 空气透视视觉 ...

  4. Spring AOP和AspectJ支持

    学了Spring之后发现我都不知道java为何物-- 在这一章中有好几节,讲的切面编程 第一节:在项目中启用Spring的AspectJ注解支持 第二节:用AspectJ注解声明aspect 第三节: ...

  5. Servlet&jsp基础:第一部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. [SAP ABAP开发技术总结]反射,动态创建内表、结构、变量

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. 《NoSQL精粹》思维导图读书笔记

    <NoSQL精粹>思维导图读书笔记 各主题笔记 这本书短小精悍,虽不能解答所有NoSQL疑问,但在读书过程中会抛给你不少未曾想过的问题,给人以更深入的思考: 这里对每一个主题分别做了笔记: ...

  8. web服务器安装配置

    学习目标 javaweb概念和web资源分类 服务器的分类和常用服务器apache说明 tomcat 服务器目录结构介绍和工程发布 虚拟主机说明和配置 1.Web的概念 1.1.JavaWeb的概念 ...

  9. 网页自适应@media

    @media (min-width: 768px){ }/*屏幕最小为768px时调用括号里的属性*/ @media (max-width: 767px) {} /*屏幕最大为768px时调用括号里的 ...

  10. ORACLE SQL 分组

    select max(cost),suppliercode from tel_bill where period = '2014005' group by suppliercode;select * ...