学习记录ES6反射内置对象Proxy与Reflect

工作中遇见了一个这样的需求:网页预览视频文件(格式有两种mp4与wmv)时,mp4格式的采用浏览器自带的video标签进行播放,wmv格式的由于浏览器不支持直接播放,则需要调用定制的wmvH5播放器来播放。

经调研发现wmvH5播放器实际上也是采用video标签进行播放的,只不过是加载、播放、暂停、定位播放等核心功能进行了特殊定制,其他如音量控制、播放状态等都是video自带的。

为了减少冗余代码,统一调用接口,我首先想到的是JS的对象继承、方法覆写,可没能实现。后来通过翻阅MDN的JavaScript参考文档发现了两个反射内置对象Proxy与Reflect,完美解决我现在遇见的问题。两个内置对象的使用在文档中阐述的已经很详细,这里不再累述。仅此记录提出问题、解决问题的过程。

参考文档

代码片段

		video = document.getElementsByTagName('video')[0];
		MyVideo = new Proxy(video, {
			get : function(target, name) {
				console.log(name);
				console.log(typeof target[name])
				if ('function' == typeof target[name]) {//当是function时需要二次代理
					return new Proxy(target[name], {
						apply : function(target, thisArg, argumentsList) {
							console.log("called: " + argumentsList.join(", "));
							return target.apply(video, argumentsList);
						}
					});
				} else {
					return target[name];
				}

			},
			set : function(target, property, value) {
				target[property] = value;
				return value;
			}
		});
时间: 2024-12-27 09:55:06

学习记录ES6反射内置对象Proxy与Reflect的相关文章

javascript学习笔记(八) js内置对象_基础知识

1.URI方法 encodeURI()和encodeURIComponent()对URI进行编码 encodeURI()不会对本身属于URI的特殊字符进行编码,如冒号,正斜杠,问好,井字等 encodeURIComponent()会对任何非标准字符进行编码 2.eval() 方法:解释参数中的代码字符串 复制代码 代码如下: var msg = "hello world"; eval("alert(msg)"); //"hello world"

Servlet开发入门(6) 取得其它内置对象

在上一篇文章中讲解了取得初始化配置信息,这一章我们一起学习怎么取得其它内置对象 取得HttpSession实例 在Servlet程序中要想取得看一个Session对象,则可以通过HttpServletRequest接口完成,在此接口中提供了以下的操作方法 1. public HttpSession getSession() 2. public HttpSession getSession(boolean create) Servlet本身提供的只是request和response两个对象,所以如

javascript 基础篇3 类,回调函数,内置对象,事件处理_基础知识

复制代码 代码如下: function 类名(参数表){ this.属性; ...... this.函数; } 这样,函数和数据成员都是用"this."来实现. 我们自己定义一个简单类student好了,然后再去构造它,并且实现一个输出函数. 复制代码 代码如下: <script LANGUAGE="JavaScript"> <!-- function student(a,b){ this.name = a; this.age=b; this.ou

ASP教程:深入认识学习ASP内置对象Request

request|对象|教程|内置对象 系统学习ASP,就是先从ASP的几大内置对象开始的.一般称五大对象:Request.Response.Server.Session.Application.今天先来看看Request对象. 当然一直还没有提到的就是,ASP到底是什么样?我看代码怎么知道是ASP代码?很简单,当看到"<%"和"%>"就表明是ASP,并且两者之间的就是ASP源码. 那为什么要学对象,对象的作用又是如何的? 其实ASP所提供的这些可在脚本中

ASP教程:深入认识学习ASP内置对象Response

response|对象|教程|内置对象 通过对Request对象的学习,可以了解到,Request对象是服务器端用来获取客户端的信息的. 但作为服务器和客户端进行交互,是不是还缺少服务器端向客户端发送信息呢?对象Response正是担任此责任. 负责将信息传递给用户的对象就是Response了,它可动态地响应客户端的请求,并将动态生成的响应结果返回给客户端浏览器. 一,Response.write 在Response中write方法是使用最频繁的一个了,write就是写:将指定的字符串写到当前的

深入认识学习ASP内置对象Request

系统学习ASP,就是先从ASP的几大内置对象开始的.一般称五大对象:Request.Response.Server.Session.Application.今天先来看看Request对象. 当然一直还没有提到的就是,ASP到底是什么样?我看代码怎么知道是ASP代码?很简单,当看到"<%"和"%>"就表明是ASP,并且两者之间的就是ASP源码. 那为什么要学对象,对象的作用又是如何的? 其实ASP所提供的这些可在脚本中使用的内建对象,使用户更容易收集通过浏

java-有人有关于内置对象相关学习资料和视频吗?

问题描述 有人有关于内置对象相关学习资料和视频吗? 面试中关于内置对象会问到什么内容?又需要看些什么 怎么回答呢?有人有相关视频看吗希望会的亲们认真帮我解答 谢谢亲们 解决方案 有,你可以去传智播客那里看一看

JavaWeb学习----JSP内置对象详解

[正文] 呼~~~花了一下午的时间,终于把JSP的内置对象的内容学完了,并做好了笔记,方便以后回顾. 今天是10月的最后一天,小小地总结一下吧,这个月共发表博客25篇(排版好麻烦的说),所有内容均由生命壹号本人敲键盘码起.基本是一天一篇,包括国庆的时候也是独霸教研室在学习,学习的大致内容也是和数据库.JavaWeb有关.毕竟以后搞开发不可能是单机吧,网络的部分是多么的重要.下个月要提高学习效率,学习任务要加大,争取早日进入工程实践,嘿嘿~~~ 菜鸟加油,恩,说我自己呢! 骚年矜持,恩,在说你咧!

js内置对象 学习笔记_javascript技巧

mark相关的知识点: 首先,什么是js的内置对象,它包括了些什么内容?(以下内容转自网上资源的整合) (W3shool JS手册地址:http://www.jb51.net/w3school/js/js_reference.htm) 作为一门编程语言,JavaScript提供了一些内置的对象和函数.内置对象提供编程的几种最常用的功能.JavaScript内置对象有以下几种. ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储