js022-高级技巧

时间：2020-12-20 16:25:51

js022-高级技巧

本章内容：

使用高级函数

防篡改对象

Yielding Timers

22.1 高级函数

1、安全的类型检测

2、作用域安全的构造函数

构造函数实际上是一个使用new操作符调用的函数，当使用new调用是，构造函数内用到的this对象会指向新创建的对象实例。

function Person(name, age, job){

//属性

this.name = name;

this.age = age;

this.job = job;

}

var person2 = new Person("lal", 18, "software enginer");

alert(window.name);

alert(window.age);

alert(window.job);

由于window的name属性是用于识别连接目标和frame的，所以这里对该属性的偶然覆盖可能会导致该页面时出现其他错误。这个问题的解决方法就是创建一个作用域安全的构造函数。

作用域安全的构造函数在进行任何更改之前，首先确认this对象是正确类型的实例。如果不是，那么会创建新的实例返回。

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("lal-Alice" , 18, "software enginer");

alert(window.name);   //""

alert(person1.name);  //"meimei"

var person2 = new Person("lal-Alice" , 22, "software enginer");

alert(person2.name);

3、惰性载入函数

两种方案实现惰性载入：一、在函数被调用时再处理函数；二、声明函数时就指定适当的函数。

4、函数绑定

函数绑定要创建一个函数，可以在特定的this环境中指定参数调用另一个函数。

使用一个简单的bind()函数接收一个函数和一个环境，并返回一个给定环境中调用给定函数的函数，并将所有参数原封不动传递过去。

function bind(fn, context){

return function(){

return fn.appply(context, arguments);

};

}

5、函数柯里化

function currying：用于创建已经设置好了一个或多个参数的函数。

函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于：函数被调用时，返回的函数还需要设置一些传入的参数

curry()函数主要工作就是将返回函数的参数进行排序。curry()的参数：第一个参数，要进行柯里化的函数，接下来的是要传入的值。

22.2 防篡改对象

一旦把对象定义为防篡改，就无法撤销了。

1、不可扩展对象

一般对象默认可以扩展：可以向对象中添加方法和属性。

2、密封的对象

密封对象不可扩展，而且已有成员的[[Configurable]]特性将被设置为false。意味着不能删除属性和方法。

可以使用Object.seal()方法来密封对象。

var person = {name:"meimei"};

Object.seal(person);

person.age = 18;

alert(person.age);  //undefined

person对象被密封后不能对其进行修改和删除。

3、冻结的对象

最严格的放篡改级别是冻结的对象。冻结的对象不可扩展，又是密封了，而且对象属性的[[Writable]]

22.3 高级定时器

setTimeout()和setInterval()创建的定时器可以用于实现有趣且有用的功能。

1、重复的定时器

setInterval()创建的定时器确保了定时器代码规则地插入队列中

2、Yielding Process

chunk()方法接收3个参数：要处理的项目数组，用于处理项目的函数，以及可选的运行该函数的环境。

3、函数节流

函数节流思想：某些代码不可以在没有间断的情况下连续重复执行。

目的：只有在执行函数的请求停止了一段时间之后才执行

22.4 自定义事件

自定义事件背后的概念是创建一个管理事件的对象，让其他对象坚挺那些事件。实现此功能的基本模式可以如下定义：

代码：（还没写。。改天补上来）

EventTarget类型有一个单独的属性：handlers，用于存储事件处理程序。还有三个方法：

addHandler()

用于注册给定类型事件的事件处理程序

接收两个参数：事件类型和用于处理该事件的函数

fire()

用于触发一个事件

接收一个参数：至少包含type属性的对象

removeHandler()

用于注销某个事件类型的事件处理程序

是addHandler()方法的辅助，它们接收的参数一样

22.5 拖放

拖放的基本概念：创建一个绝对定位的元素，使其可以使用鼠标移动

设置一个onmousemove事件处理程序：

EventUtil.addHandler(document, "mousemove",function(event){

var myDiv = document.getElementById("myDiv");

myDiv.style.left = event.clientX + "px";

myDiv.style.top = event.clientY + "px";

});

鼠标拖动事件代码：P619

indexOf值为-1是什么意思？？？

1、修缮拖动功能    P620（做拖放条时应该会用到。）

2、添加自定义事件  （使拖放功能真正应用起来：创建一个新的EventTarget对象，然后添加enable()和disable()方法，最后返回这个对象）

声明：该博客由http://www.cnblogs.com/lal-fighting/原创发表，未经作者允许，不得私自转载抄袭！！！

相关文章