JS高级技巧学习小结
2016-03-30 23:03
399 查看
安全类型检测
<script type="text/javascript"> //判断某个值是不是原生数组 function isArray(value){ return Object.prototype.toString.call(value)=="[object Array]"; } //判断某个值是不是原生函数 function isFunction(value){ return return Object.prototype.toString.call(value)=="[object Function]"; } //判断某个值是不是原生正则表达式 function isRegExp(value){ return return Object.prototype.toString.call(value)=="[object RegExp]"; } </script>
作用域安全的构造函数
构造函数其实就是一个使用new操作符调用的函数,当使用new调用时,构造函数内部用到的this对象会指向新创建的对象实例。Person构造函数添加了一个检查并确保this对象是Person实例的if语句,它要么使用new操作符,要么在现有的Person实例环境中调用构造函数。任何一种情况,对象初始化都可以正常进行。
如果this对象不是Person的实例,那么会再次使用new操作符调用构造函数并返回结果。这样就可以确保无论是否使用new操作符,都会返回一个Person的新实例。
Demo1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>作用域安全的构造函数</title> </head> <body> <script type="text/javascript"> function Person(name,age,job){ if(this instanceof Person)//这里检测以确保this是Person的实例 { this.name=name; this.age=age; this.job=job; }else{ return new Person(name,age,job); } } var person1=Person("liujie",23,"master"); console.log(window.name);//"" console.log(person1.name);//liujie var person2=new Person("lisi",21,"student"); console.log(person2.name);//lisi </script> </body> </html>
Demo2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>作用域安全的构造函数</title> </head> <body> <script type="text/javascript"> function Person(name, age, job){ this.name = name; this.age = age; this.job = job; } var person1 = new Person("Nicholas", 29, "Software Engineer"); console.log(person1);//[object Object] console.log(person1.name); //"Nicholas" console.log(person1.age); //29 console.log(person1.job); //"Software Engineer" var person2 = Person("Nicholas", 29, "Software Engineer"); //这里忽略了new操作符,把构造函数作为普通函数调用 console.log(person2); //undefined 因为Person函数没有返回值 console.log(window.name); //"Nicholas" 这里this-->window console.log(window.age); //29 console.log(window.job); //"Software Engineer" </script> </body> </html>
这里问题在于没有使用new操作符来调用该构造函数的情况上,由于该this对象是在运行时绑定的,所以直接调用Person(),this会映射到全局对象window上,导致错误对象属性的意外增加。
这里原本针对Person实例的三个属性被加到window对象上,因为构造函数是作为普通函数调用的,忽略了new操作符。这个问题是由于this对象的晚绑定造成的,在这里this被解析成了window对象。由于window的name属性是用于识别链接目标和frame的,所以这里对该属性的偶然覆盖可能会导致该页面上出现其他错误。可以创建一个作用域安全的构造函数来解决这个问题。
Demo3
在实现了作用域安全的构造函数后,如果使用构造函数窃取模式的继承且不使用原型链,那么这个继承可能被破坏。
下面的代码,Polygon构造函数是作用域安全的,然而Rectangle构造函数则不是。新创建一个Rectangle实例后,这个实例应该通过Polygon.call()来继承Polygon的sides属性。但是,由于Polygon构造函数是作用域安全的,this对象并非Polygon的实例,所以会创建并返回一个新的Polygon对象。Rectangle构造函数中的this对象并没有得到增长,同时Polygon.call()返回的值也没有用到,所以Rectangle实例中就不会有sides属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>作用域安全的构造函数</title> </head> <body> <script type="text/javascript"> function Polygon(sides){ if (this instanceof Polygon) { this.sides = sides; this.getArea = function(){ return 0; }; } else { return new Polygon(sides); } } function Rectangle(width, height){ Polygon.call(this, 2); this.width = width; this.height = height; this.getArea = function(){ return this.width * this.height; }; } var rect = new Rectangle(5, 10); console.log(rect.sides); //undefined </script> </body> </html>
Demo4
构造函数窃取结合使用原型链可以解决这个问题
这样一来,一个Rectangle实例也同时是一个Polygon实例,所以Polygon.call()会照原意执行,最终为Rectangle实例添加sides属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>作用域安全的构造函数</title> </head> <body> <script type="text/javascript"> function Polygon(sides){ if (this instanceof Polygon) { this.sides = sides; this.getArea = function(){ return 0; }; } else { return new Polygon(sides); } } function Rectangle(width, height){ Polygon.call(this, 2); this.width = width; this.height = height; this.getArea = function(){ return this.width * this.height; }; } Rectangle.prototype=new Polygon();//实现继承 var rect = new Rectangle(5, 10); console.log(rect.sides); //2 </script> </body> </html>
惰性载入函数
惰性载入表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式,第一种就是在函数被调用时再处理函数。在第一次调用的过程中,该函数会被覆盖为另一个按合适方式执行的函数,这样任何对原函数的调用都不用再经过执行的分支了。
在这个惰性载入的createXHR()中,if语句的每一个分支都会createXHR变量赋值,有效覆盖了原有的函数。最后一步便是调用新赋的函数。下一次调用createXHR()的时候,就会直接调用被分配的函数,这样就不需要再次执行if语句了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>惰性载入函数</title> </head> <body> <script type="text/javascript"> 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]; } catch (ex){ //skip } } } return new ActiveXObject(arguments.callee.activeXString); }; } else { createXHR = function(){ throw new Error("No XHR object available."); }; } return createXHR(); } var xhr1 = createXHR(); var xhr2 = createXHR(); </script> </body> </html>
第二种实现方式:在声明函数时就指定适当的函数。
这样,第一次调用函数时就不会损失性能了,而在代码首次加载时会损失一点性能。
这个例子的技巧:创建了一个匿名、自执行的函数,用以确定应该使用哪一个函数实现。每个分支都返回正确的函数定义,以便立即将其赋值给createXHR()
惰性载入函数的优点是只在执行分支代码时牺牲一点性能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>惰性载入函数</title> </head> <body> <script type="text/javascript"> var createXHR = (function(){ if (typeof XMLHttpRequest != "undefined"){ return function(){ return new XMLHttpRequest(); }; } else if (typeof ActiveXObject != "undefined"){ return 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 { return function(){ throw new Error("No XHR object available."); }; } })(); var xhr1 = createXHR(); var xhr2 = createXHR(); </script> </body> </html>
函数绑定
函数绑定要创建一个函数,可以在特定的this环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用,以便在将函数作为变量传递的同时保留代码执行环境。js库实现了一个可以将函数绑定到指定环境的函数–bind()
bind()函数接收一个函数和一个环境,并返回一个在给定环境中调用给定函数的函数,并且将所有参数原封不动传递过去。
在bind()函数中创建了一个闭包,闭包使用apply()调用传入的函数,并给apply()传递context对象和参数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数绑定</title> </head> <body> <input type="button" id="my-btn" value="Click Me" /> <script type="text/javascript" src="EventUtil.js"></script> <script type="text/javascript"> function bind(fn, context){//接收一个函数和一个环境 return function(){ return fn.apply(context, arguments); }; } var handler = { message: "Event handled", handleClick: function(event){ console.log(this.message + ":" + event.type);//Event handled:click } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler)); </script> </body> </html>
函数绑定要创建一个函数,可以在特定的this环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用,以便在将函数作为变量传递的同时保留代码执行环境。
下面的例子将对象handler的handleClick方法分配为按钮的事件处理程序。当按下按钮时,就应该调用该函数,显示一个警告框。虽然貌似警告框应该显示Event handled,然而实际上显示undefined。这是因为没有保存handler.handleClick()的执行环境,所以this指向了DOM按钮而不是handler对象。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数绑定</title> </head> <body> <input type="button" id="my-btn" value="Click Me" /> <script type="text/javascript" src="EventUtil.js"></script> <script type="text/javascript"> var handler = { message: "Event handled", handleClick: function(event){ //console.log(this);//<input id="my-btn" type="button" value="Click Me"> console.log(this.message);//undefined } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick); </script> </body> </html>
函数绑定要创建一个函数,可以在特定的this环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用,以便在将函数作为变量传递的同时保留代码执行环境。
下面的例子将对象handler的handleClick方法分配为按钮的事件处理程序。当按下按钮时,就应该调用该函数,显示一个警告框。虽然貌似警告框应该显示Event handled,然而实际上显示undefined。这是因为没有保存handler.handleClick()的执行环境,所以this指向了DOM按钮而不是handler对象。
这里在onclick事件处理程序中使用了一个闭包直接调用handler.handleClick()。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数绑定</title> </head> <body> <input type="button" id="my-btn" value="Click Me" /> <script type="text/javascript" src="EventUtil.js"></script> <script type="text/javascript"> var handler = { message: "Event handled", handleClick: function(event){ //console.log(this);// Object { message="Event handled", handleClick=function()} console.log(this.message);//Event handled } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", function(event){ handler.handleClick(event); }); </script> </body> </html>
ECMAScript5为所有函数定义了一个原生的bind()方法,进一步简单了操作。
不管原生的bind方法还是自定义的bind方法,都需要传入作为this值的对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bind函数绑定</title> </head> <body> <input type="button" id="my-btn" value="Click Me" /> <script type="text/javascript" src="EventUtil.js"></script> <script type="text/javascript"> var handler = { message: "Event handled", handleClick: function(event){ console.log(this.message + ":" + event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler)); </script> </body> </html>
函数柯里化
函数柯里化–用于创建已经设置好了一个或多个参数的函数。其基本方法与函数绑定一样:使用一个闭包返回一个函数。两者区别在于:函数柯里化在函数被调用时,返回的函数还需要传入参数。创建方法:调用另一个函数并为它传入要柯里化的函数和必要参数
Demo1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数柯里化</title> </head> <body> <script type="text/javascript"> function curry(fn){ //这里在arguments对象上调用了slice()方法,并传入参数1表示被返回的数组包含从第二个参数开始的所有参数 var args = Array.prototype.slice.call(arguments, 1);//slice() 方法可从已有的数组中返回选定的元素。 return function(){ var innerArgs = Array.prototype.slice.call(arguments),//innerArgs表示内部函数的参数数组 finalArgs = args.concat(innerArgs);//将外部函数参数数组和内部函数参数数组进行连接 //concat()连接两个或更多的数组,并返回结果。 return fn.apply(null, finalArgs);//这里的null表示没有考虑fn函数的执行环境 }; } function add(num1, num2){//求和函数 return num1 + num2; } //curry()函数的第一个参数是要柯里化的函数,其他参数是要传入的值 var curriedAdd = curry(add, 5);//这里的5是外部函数参数,3是内部函数参数 alert(curriedAdd(3)); //8 var curriedAdd2 = curry(add, 5, 12);//柯里化的add函数 alert(curriedAdd2()); //17 </script> </body> </html>
Demo2
函数柯里化还常常作为函数绑定的一部分包含在其中,构造出更为复杂的bind函数。
这里bind同时接受函数和一个object对象。表示给被绑定的函数的参数是从第三个开始的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数柯里化</title> </head> <body> <input type="button" id="my-btn" value="Click Me"> <script type="text/javascript" src="../EventUtil.js"></script> <script type="text/javascript"> function bind(fn, context){//fn=handler.handleClick context=handler var args = Array.prototype.slice.call(arguments, 2);//获取到"my-btn" return function(){ var innerArgs = Array.prototype.slice.call(arguments), finalArgs = args.concat(innerArgs); return fn.apply(context, finalArgs);//handler.handleClick.apply(handler, "my-btn"); }; } var handler = { message: "Event handled", handleClick: function(name, event){//name是要处理的元素的名字 //event就是event对象 console.log(this.message + ":" + name + ":" + event.type);//Event handled:my-btn:click } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler, "my-btn")); </script> </body> </html>
Demo3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数柯里化</title> </head> <body> <input type="button" id="my-btn" value="Click Me"> <script type="text/javascript" src="../EventUtil.js"></script> <script type="text/javascript"> var handler = { message: "Event handled", handleClick: function(name, event){ console.log(this.message + ":" + name + ":" + event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler, "my-btn")); //handler.handleClick.bind(handler, "my-btn")这样绑定指handler.handleClick函数中的this指向handler对象 //bind()方法也实现了函数柯里化,只要在this的值之后再传入另一个参数即可 </script> </body> </html>
防纂改对象
不可扩展对象
<script type="text/javascript"> /* Object.preventExtensions()用来阻止给对象添加属性和方法 */ var person = { name: "Nicholas" }; Object.preventExtensions(person); person.age = 29; console.log(person.age);//undefined </script>
<script type="text/javascript"> /* Object.preventExtensions()用来阻止给对象添加属性和方法 Object.isExtensible()方法用来判断元素是否可以扩展 */ var person = { name: "Nicholas" }; console.log(Object.isExtensible(person)); //true Object.preventExtensions(person); console.log(Object.isExtensible(person)); //false person.age = 29; console.log(person.age);//undefined </script>
密封的对象
<script type="text/javascript"> /* Object.seal()将对象密封,不能给对象添加和删除属性和方法 */ var person = { name: "Nicholas" }; Object.seal(person); person.age = 29; console.log(person.age); //undefined delete person.name; console.log(person.name); //"Nicholas" </script>
<script type="text/javascript"> /* Object.seal()将对象密封,不能给对象添加和删除属性和方法 */ var person = { name: "Nicholas" }; console.log(Object.isExtensible(person)); //true 返回true表示对象可以扩展 console.log(Object.isSealed(person)); //false 返回false表示对象没有密封 Object.seal(person); console.log(Object.isExtensible(person)); //false console.log(Object.isSealed(person)); //true 对象被密封 person.age = 29; console.log(person.age);//undefined" </script>
冻结的对象
<script type="text/javascript"> /* Object.freeze()方法是冻结对象,冻结的对象既不能扩展,同时也是密封的,而且对象的[[writeable]]特性也被设置为false */ var person = { name: "Nicholas" }; Object.freeze(person); person.age = 29;//不可以扩展 console.log(person.age); //undefined delete person.name;//不可以删除 console.log(person.name); //"Nicholas" person.name = "Greg";//因为writeable]]特性被设置为false的原因,不能被修改 console.log(person.name); //"Nicholas" </script>
<script type="text/javascript"> /* Object.freeze()方法是冻结对象,冻结的对象既不能扩展,同时也是密封的,而且对象的[[writeable]]特性也被设置为false */ var person = { name: "Nicholas" }; console.log(Object.isExtensible(person)); //true console.log(Object.isSealed(person)); //false console.log(Object.isFrozen(person)); //false Object.isFrozen()用来判断对象是否被冻结 Object.freeze(person); console.log(Object.isExtensible(person)); //false console.log(Object.isSealed(person)); //true console.log(Object.isFrozen(person)); //true person.age = 29; console.log(person.age);//undefined </script>
高级定时器
js是运行于单线程的环境中的,定时器仅仅只是计划代码在未来的某个时间执行。执行时机是不能保证的,因为在页面的生命周期中,不同事件可能有其他代码在控制js进程。在页面下载完后的代码运行、事件处理程序、Ajax回调函数都必须使用同样的线程来执行。实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级。当某个按钮被按下,它的事件处理程序代码就会被添加到队列中,并在下一个可能的时间里执行。当接收到某个Ajax响应时,回调函数的代码会被添加到队列。在js中没有任何代码时立刻执行的,但是一旦进程空闲则尽快执行。
定时器对队列的工作方式是:当特定时间过去后将代码插入。注意,给队列添加代码并不意味着对它立刻执行,而只能表示它会尽快执行。例如:设定一个150ms后执行的定时器不代表到了150ms代码就立刻执行,它表示代码会在150ms后被加入到队列中。如果在这个时间点,队列中没有其他东西,那么这段代码就会被执行,表面上看上去就好像代码就在精确的时间点上执行了。其他情况,代码可能明显等待更长时间才执行。
Demo1:
为了避免setInterval()的重复定时器的缺点,可以采用链式setTimeout()方式
调用setTimeout(),每次函数执行的时候都会创建一个新的定时器。第二个setTimeout()调用使用了arguments.callee来获取对当前执行的函数的引用,并为其设置另外一个定时器。这样做的好处:在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔。而且,它可以保证在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。这个模式主要用于重复定时器。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>重复的定时器</title> </head> <body> <div id="myDiv" style="position:absolute;width:100px;height:100px;left:0px;top:10px;background:red;"></div> <script type="text/javascript"> setTimeout(function() { var div = document.getElementById("myDiv"), left = parseInt(div.style.left) + 5; div.style.left = left + "px"; if (left < 200){ setTimeout(arguments.callee, 50); } }, 50); </script> </body> </html>
数组分块技术
数组分块技术基本的思路:为要处理的项目创建一个队列,然后使用定时器取出下一个要处理的项目进行处理,接着再设置另一个定时器。数组分块的重要性在于它可以将多个项目的处理在执行队列上分开,在每个项目处理之后,给予其他的浏览器处理机会运行,这样就可能避免长时间运行脚本的错误。
data.concat():当不传递任何参数调用数组的concat()方法时,将返回和原来数组中项目一样的数组。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>数组分块技术</title> </head> <body> <div id="myDiv" style="background:red;"></div> <script type="text/javascript"> var data = [12,123,1234,453,436,23,23,5,4123,45,346,5634,2234,345,342]; function chunk(array, process, context){ //三个参数:要处理的项目的数组,用于处理项目的函数,可选的运行该函数的环境 setTimeout(function(){ var item = array.shift();//获取队列中下一个要处理的项目 process.call(context, item); if (array.length > 0){ setTimeout(arguments.callee, 100); } }, 100); } function printValue(item){ var div = document.getElementById("myDiv"); div.innerHTML += item + "<br>"; } chunk(data, printValue); </script> </body> </html>
函数节流
函数节流背后的基本思想是:某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除之前的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是在只有在执行函数的请求停止了一段时间之后才执行。我们使用throttle()函数来实现定时器的设置和清除。
throttle()函数接收两个参数:要执行的函数以及在哪个作用域中执行。在函数中先清除之前设置的任何定时器。定时器ID是存储在函数的tId属性中的。
只要代码时周期性执行的,都应该使用节流,但是你不能控制请求执行的速率。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>函数节流</title> </head> <body> <div id="myDiv" style="background:red;"></div> <script type="text/javascript"> function throttle(method, scope) { clearTimeout(method.tId); method.tId= setTimeout(function(){ method.call(scope); }, 100); } function resizeDiv(){ var div = document.getElementById("myDiv"); div.style.height = div.offsetWidth + "px"; } window.onresize = function(){ throttle(resizeDiv); }; </script> </body> </html>
自定义事件
事件是一种叫做观察者的设计模式,这是一种创建松散耦合代码的技术,对象可以发布事件,用来表示在该对象生命周期中某个时刻到了,然后其他对象可以观察该对象,等待这些时刻到来并通过运行代码来响应。观察者模式由两类对象组成:主体和观察者。主体负责发布事件,同时观察者通过订阅这些事件来观察主体。该模式的一个关键概念是主体并不知道观察者的任何事情,也就是说它可以独自存在并正常运作即使观察者不存在。
Demo1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>自定义事件</title> </head> <body> <div id="myDiv" style="background:red;"></div> <script type="text/javascript"> function handleMessage(event){ console.log("Message received: " + event.message);//Hello world! } //创建一个新对象 var target = new EventTarget(); //添加一个事件处理程序 target.addHandler("message", handleMessage); //触发事件 target.fire({ type: "message", message: "Hello world!"}); //移除事件处理程序 target.removeHandler("message", handleMessage); //再次触发,但不会显示任何警告框 target.fire({ type: "message", message: "Hello world!"}); </script> </body> </html>
事件是一种叫做观察者的设计模式,这是一种创建松散耦合代码的技术,对象可以发布事件,用来表示在该对象生命周期中某个时刻到了,然后其他对象可以观察该对象,等待这些时刻到来并通过运行代码来响应。
观察者模式由两类对象组成:主体和观察者。主体负责发布事件,同时观察者通过订阅这些事件来观察主体。该模式的一个关键概念是主体并不知道观察者的任何事情,也就是说它可以独自存在并正常运作即使观察者不存在。
Person类型使用寄生组合继承方法来继承EventTarget
Demo2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>自定义事件</title> </head> <body> <div id="myDiv" style="background:red;"></div> <script type="text/javascript"> function object(o){ function F(){} F.prototype = o; return new F(); } function inheritPrototype(subType, superType){ var prototype = object(superType.prototype); //创建对象 prototype.constructor = subType; //增强对象 subType.prototype = prototype; //指定对象 } function Person(name, age){ EventTarget.call(this); this.name = name; this.age = age; } inheritPrototype(Person,EventTarget); Person.prototype.say = function(message){ this.fire({type: "message", message: message}); }; function handleMessage(event){ console.log(event.target.name + " says: " + event.message); } var person = new Person("Nicholas", 29); person.addHandler("message", handleMessage); person.say("Hi there."); </script> </body> </html>
相关文章推荐
- 单源最短路径Dijstra算法
- js中callback.call()和callback()的区别
- JSP 2特性 —— Tag File 支持
- 理解javascript中的回调函数(callback)
- 赠书《JavaScript高级程序设计(第三版)》5本
- JavaScript基础内容复习1
- 1-4-JS基础-条件判断
- 原生js实现Ajax
- javascript-datatable错误提示
- JavaScript函数表示式
- js总结-面向对象编程,DOM,BOM
- 第九章:BOM浏览器对象模型
- 【09类和模块】——6:javascript中的面向对象技术(集合类)
- JSP 2 特性 -- 表达式语言
- ExtJs之gridPanel的属性表格,编辑表格,表格分页,分组等技巧
- 【JavaScript】基础知识整理(四)
- javaScript——作用域和闭包概念
- js获取Url中参数值
- JavaScript 流程控制语句
- JS高级程序设置笔记(二)