您的当前位置:首页IE8新增的Javascript开发接口说明_基础知识
广告

IE8新增的Javascript开发接口说明_基础知识

2023-12-03 来源:旭新科技网

IE8 新增的Javascript 对象 (Object)

Attr Constructor

Defines the properties and methods inherited by objects in the Attr Constructor prototype chain.

BehaviorUrnsCollection Constructor

Defines the properties and methods inherited by objects in the BehaviorUrnsCollection Constructor prototype chain.

BookmarkCollection Constructor

Defines the properties and methods inherited by objects in the BookmarkCollection Constructor prototype chain.

CompatibleInfo Constructor

Defines the properties and methods inherited by objects in the CompatibleInfo Constructor prototype chain.

CompatibleInfoCollection Constructor

Defines the properties and methods inherited by objects in the CompatibleInfoCollection Constructor prototype chain.

ControlRangeCollection Constructor

Defines the properties and methods inherited by objects in the ControlRangeCollection Constructor prototype chain.

CSSCurrentStyleDeclaration Constructor

Defines the properties and methods inherited by objects in the CSSCurrentStyleDeclaration Constructor prototype chain.

CSSRuleList Constructor

Defines the properties and methods inherited by objects in the CSSRuleList Constructor prototype chain.

CSSRuleStyleDeclaration Constructor

Defines the properties and methods inherited by objects in the CSSRuleStyleDeclaration Constructor prototype chain.

CSSStyleDeclaration Constructor

Defines the properties and methods inherited by objects in the CSSStyleDeclaration Constructor prototype chain.

CSSStyleRule Constructor

Defines the properties and methods inherited by objects in the CSSStyleRule Constructor prototype chain.

CSSStyleSheet Constructor

Defines the properties and methods inherited by objects in the CSSStyleSheet Constructor prototype chain.

DataTransfer Constructor

Defines the properties and methods inherited by objects in the DataTransfer Constructor prototype chain.

DOMImplementation Constructor

Defines the properties and methods inherited by objects in the DOMImplementation Constructor prototype chain.

Element Constructor

Defines the properties and methods inherited by objects in the Element Constructor prototype chain.

Event Constructor

Defines the properties and methods inherited by objects in the Event Constructor prototype chain.

History Constructor

Defines the properties and methods inherited by objects in the History Constructor prototype chain.

HTCBehavior Constructor

Defines the properties and methods inherited by objects in the HTCBehavior Constructor prototype chain.

HTCElementBehaviorDefaults Constructor

Defines the properties and methods inherited by objects in the HTCElementBehaviorDefaults Constructor prototype chain.

HTMLAnchorElement Constructor

Defines the properties and methods inherited by objects in the HTMLAnchorElement Constructor prototype chain.

HTMLAreaElement Constructor

Defines the properties and methods inherited by objects in the HTMLAreaElement Constructor prototype chain.

HTMLAreasCollection Constructor

Defines the properties and methods inherited by objects in the HTMLAreasCollection Constructor prototype chain.

HTMLBaseElement Constructor

Defines the properties and methods inherited by objects in the HTMLBaseElement Constructor prototype chain.

HTMLBaseFontElement Constructor

Defines the properties and methods inherited by objects in the HTMLBaseFontElement Constructor prototype chain.

HTMLBGSoundElement Constructor

Defines the properties and methods inherited by objects in the HTMLBGSoundElement Constructor prototype chain.

HTMLBlockElement Constructor

Defines the properties and methods inherited by objects in the HTMLBlockElement Constructor prototype chain.

HTMLBodyElement Constructor

Defines the properties and methods inherited by objects in the HTMLBodyElement Constructor prototype chain.

HTMLBRElement Constructor

Defines the properties and methods inherited by objects in the HTMLBRElement Constructor prototype chain.

HTMLButtonElement Constructor

Defines the properties and methods inherited by objects in the HTMLButtonElement Constructor prototype chain.

HTMLCollection Constructor

Defines the properties and methods inherited by objects in the HTMLCollection Constructor prototype chain.

HTMLCommentElement Constructor

Defines the properties and methods inherited by objects in the HTMLCommentElement Constructor prototype chain.

HTMLDDElement Constructor

Defines the properties and methods inherited by objects in the HTMLDDElement Constructor prototype chain.

HTMLDivElement Constructor

Defines the properties and methods inherited by objects in the HTMLDivElement Constructor prototype chain.

HTMLDListElement Constructor

Defines the properties and methods inherited by objects in the HTMLDListElement Constructor prototype chain.

HTMLDocument Constructor

Defines the properties and methods inherited by objects in the HTMLDocument Constructor prototype chain.

DocumentCompatibleInfo

Provides information about the compatibity mode specified by the Web page. If the Web page specifies multiple compatibility modes, they can be retrieved using documentCompatibleInfoCollection.

HTMLDTElement Constructor

Defines the properties and methods inherited by objects in the HTMLDTElement Constructor prototype chain.

HTMLEmbedElement Constructor

Defines the properties and methods inherited by objects in the HTMLEmbedElement Constructor prototype chain.

HTMLFieldSetElement Constructor

Defines the properties and methods inherited by objects in the HTMLFieldSetElement Constructor prototype chain.

HTMLFontElement Constructor

Defines the properties and methods inherited by objects in the HTMLFontElement Constructor prototype chain.

HTMLFormElement Constructor

Defines the properties and methods inherited by objects in the HTMLFormElement Constructor prototype chain.

HTMLFrameElement Constructor

Defines the properties and methods inherited by objects in the HTMLFrameElement Constructor prototype chain.

HTMLFrameSetElement Constructor

Defines the properties and methods inherited by objects in the HTMLFrameSetElement Constructor prototype chain.

HTMLGenericElement Constructor

Defines the properties and methods inherited by objects in the HTMLGenericElement Constructor prototype chain.

HTMLHeadElement Constructor

Defines the properties and methods inherited by objects in the HTMLHeadElement Constructor prototype chain.

HTMLHeadingElement Constructor

Defines the properties and methods inherited by objects in the HTMLHeadingElement Constructor prototype chain.

HTMLHRElement Constructor

Defines the properties and methods inherited by objects in the HTMLHRElement Constructor prototype chain.

HTMLHtmlElement Constructor

Defines the properties and methods inherited by objects in the HTMLHtmlElement Constructor prototype chain.

HTMLIFrameElement Constructor

Defines the properties and methods inherited by objects in the HTMLIFrameElement Constructor prototype chain.

HTMLImageElement Constructor

Defines the properties and methods inherited by objects in the HTMLImageElement Constructor prototype chain.

HTMLInputElement Constructor

Defines the properties and methods inherited by objects in the HTMLInputElement Constructor prototype chain.

HTMLIsIndexElement Constructor

Defines the properties and methods inherited by objects in the HTMLIsIndexElement Constructor prototype chain.

HTMLLabelElement Constructor

Defines the properties and methods inherited by objects in the HTMLLabelElement Constructor prototype chain.

HTMLLegendElement Constructor

Defines the properties and methods inherited by objects in the HTMLLegendElement Constructor prototype chain.

HTMLLIElement Constructor

Defines the properties and methods inherited by objects in the HTMLLIElement Constructor prototype chain.

HTMLLinkElement Constructor

Defines the properties and methods inherited by objects in the HTMLLinkElement Constructor prototype chain.

HTMLMapElement Constructor

Defines the properties and methods inherited by objects in the HTMLMapElement Constructor prototype chain.

HTMLMarqueeElement Constructor

Defines the properties and methods inherited by objects in the HTMLMarqueeElement Constructor prototype chain.

HTMLMetaElement Constructor

Defines the properties and methods inherited by objects in the HTMLMetaElement Constructor prototype chain.

HTMLModelessDialog Constructor

Defines the properties and methods inherited by objects in the HTMLModelessDialog Constructor prototype chain.

HTMLNamespaceInfo Constructor

Defines the properties and methods inherited by objects in the HTMLNamespaceInfo Constructor prototype chain.

HTMLNamespaceInfoCollection Constructor

Defines the properties and methods inherited by objects in the HTMLNamespaceInfoCollection Constructor prototype chain.

HTMLNextIdElement Constructor

Defines the properties and methods inherited by objects in the HTMLNextIdElement Constructor prototype chain.

HTMLObjectElement Constructor

Defines the properties and methods inherited by objects in the HTMLObjectElement Constructor prototype chain.

HTMLOListElement Constructor

Defines the properties and methods inherited by objects in the HTMLOListElement Constructor prototype chain.

HTMLOptionElement Constructor

Defines the properties and methods inherited by objects in the HTMLOptionElement Constructor prototype chain.

HTMLParagraphElement Constructor

Defines the properties and methods inherited by objects in the HTMLParagraphElement Constructor prototype chain.

HTMLParamElement Constructor

Defines the properties and methods inherited by objects in the HTMLParamElement Constructor prototype chain.

HTMLPhraseElement Constructor

Defines the properties and methods inherited by objects in the HTMLPhraseElement Constructor prototype chain.

HTMLPluginsCollection Constructor

Defines the properties and methods inherited by objects in the HTMLPluginsCollection Constructor prototype chain.

HTMLPopup Constructor

Defines the properties and methods inherited by objects in the HTMLPopup Constructor prototype chain.

HTMLScriptElement Constructor

Defines the properties and methods inherited by objects in the HTMLScriptElement Constructor prototype chain.

HTMLSelectElement Constructor

Defines the properties and methods inherited by objects in the HTMLSelectElement Constructor prototype chain.

HTMLSpanElement Constructor

Defines the properties and methods inherited by objects in the HTMLSpanElement Constructor prototype chain.

Storage

Represents the list of key/value pairs that have been assigned to a single storage area.

HTMLStyleElement Constructor

Defines the properties and methods inherited by objects in the HTMLStyleElement Constructor prototype chain.

HTMLTableCaptionElement Constructor

Defines the properties and methods inherited by objects in the HTMLTableCaptionElement Constructor prototype chain.

HTMLTableCellElement Constructor

Defines the properties and methods inherited by objects in the HTMLTableCellElement Constructor prototype chain.

HTMLTableColElement Constructor

Defines the properties and methods inherited by objects in the HTMLTableColElement Constructor prototype chain.

HTMLTableElement Constructor

Defines the properties and methods inherited by objects in the var cpro_id = "u6292429";

小编还为您整理了以下内容,可能对您也有帮助:

怎样在IE8里面调试javascript

以IE8浏览器为例,接下来重点介绍并演示如何使用浏览器自带的开发人员工具调试JS程序。(该工具快捷按钮为F12)

1、在工具->Internet选项->高级,去掉“禁用脚步调试(Internet Explorer)”项的勾选。

2、去掉“显示友好http错误信息”项的勾选。最后点击应用,确定按钮。

3、预览表单,当要执行的js程序出现错误时,浏览器会给出提示。

4、在给出的错误提示窗口中,选择“是(Y)”按钮,进入IE浏览器自带的开发人员工具脚本调试界面。

5、根据JS调试信息可以知道,当前JS报错是由于没有找到指定对象“dat”而导致的。我们需要在表单设计器中,修改JS程序并保存。因演示效果的需要,在本例中是没有设置id值为dat的单行输入框控件的,本例中第二个单行输入框控件的id值是data2。修改后的JS代码。

6、将其改成值data2后,再进行测试不会出现JS报错信息,程序得以正常执行。

7、本例只是演示了如何利用IE自带的开发人员工具进行简单的调试工作,如需了解其他调试及排查技巧,请参阅网络及相关书籍进行学习。

IE8 javascript 对象 Object.defineProperty相关问题

对象是无序属性的集合,而这些属性在创建是都带有一些特征值(可以理解为属性的属性,天生自带的),这些特征值是为了实现JavaScript引擎用的,因此JavaScript不能直接访问。

JavaScript通过这些特征值来定义属性的行为(属性是否删除,枚举,修改等)。

例如,在全局定义的属性是会挂载到window上的。当想删除window上的这个属性,是不可以的。也就是说window上的属性是不可配置的。delete window.obj //false

Function.prototype当你修改成其他值,其原始值并没有改变。是不可写的。

在比如,我们的for in是可以枚举原型链上属性的,但所有的原型顶端都是Object.prototype.但for in 并没有枚举出来。所以Object.prototype是不可枚举的。

属性分为两种类型:1数据属性 2访问器属性。例如:一般我们自己在对象设置的属性默认是数据属性,而Window上的那么属性是访问器属性。

怎样知道这个属性到底是数据属性还是访问器属性?

使用Object.getOwnPropertyDescriptor(属性所在的对象,属性)方法。 返回一个对象,当时访问器属性时,该对象属性有enumerable,configurable,get,set。当时数据属性,该对象返回的属性有value,writable,enumerable,configurable.

var obj = {name:'zwq',age:18};console.log(Object.getOwnPropertyDescriptor(obj,'name')); //name属性属性//{value: "zwq", writable: true, enumerable: true, configurable: true}console.log(Object.getOwnPropertyDescriptor(window,'name')); //window上的name属性时访问器属性//enumerable: true, configurable: true, get: ?, set: ?}

数据属性

● 数据上行包含一个数据值的位置,可以读取和写入值,数据属性有4个描述其行为的属性,由于是这些值不能直接访问,是内部值,所以该规范把他们放在两对括号中。

● 属性是否可配置:[[Configurable]]:表能否通过delete删除属性,能够修改属性的特性,能否把属性修改为访问器属性

● 属性是否可枚举:[[Enumerable]]:表能否通过for-in循环返回属性

● 属性是否可修改:[[Writable]]

● 属性的数据值 :[[value]]读取属性的时候,从这个位置读,写入属性的时候,把新值保存到这个位置。

普通定义的属性 默认值前三个都是true,最后一个是undefined。

当我们想到修改属性默认的特性,使用Object.defineProperty(属性所在对象,属性的名字,描述符对象)方法。

当使用Object.defineProperty方法第二个参数属性的名字不存在时,该方法会创建这个属性,并且该属性的特性除了value剩下的特性的默认值都是false。也就是说当你想让这个用Object.defineProperty方法创建的属性跟正常的属性一样可枚举,配置,写入,必须把这个属性值的特性都改为true。否则就是false。

var obj = {name:'zwq',age:18}; Object.defineProperty(obj,'name',{ 修改name属性的特性,值为haha,并且name属性不能修改值 value:'haha', writable:false //默认值是true,改为false,不可写。 }) Object.defineProperty(obj,'sex',{创建一个sex属性,这个属性不可枚举 value:'woman', writable:true, configurable:true, })

访问器属性

访问器属性不包含writable和value,他包含的是一对getter和setter函数,在读取访问器属性是,会调用getter函数,并返回有效的值,在写入访问器属性时(修改属性)会调用setter函数并传入新值。访问器包含4个特性

● 属性是否可配置:[[Configurable]]:表能否通过delete删除属性,能够修改属性的特性,能否把属性修改为访问器属性

● 属性是否可枚举:[[Enumerable]]:表能否通过for-in循环返回属性

● [[Get]]:在读取属性时调用的函数。默认值是undefined。

● [[Set]]:在写入(或修改)属性时调用的函数。默认值undefined。

定义访问器属性,同样也必须商用Object.defineProperty().

function Person(){ this._name = 'zwq', this.age = 18 } var person = new Person(); Object.defineProperty(person,'name',{ set(newValue){ console.log('set'); this._name = newValue //设置或修改属性时,会调用set函数,把设置的值通过参数传进去后,用一个变量或属性保存。并且当调用get,return就是返回的这个值 }, get(){ return this._name; //当读取属性时 返回return的值 } })

不一定非要同时指定getter和setter,只指定getter意味着属性是不能写。

vue的双向数据劫持绑定(主要应用于表单中)的原理就是利用Object.defineProperty来检测数据的变化。

双向劫持绑定时当视图(页面的某一元素)发生改变时,数据跟着改变,当数据改变时,视图也跟着改变。例如下面的输入框里面的内容改变时,数据(对象或数组)改变。检测数据改变。底下的p文本根据数据的改变而改变。

上面我们介绍到,当数据改变时会触发set方法。由此我们就可以检测数据的变化。

//检测对象的变化。     var input = document.getElementById('Oinput'); var view = document.getElementById('view'); var data = { valueObj :{ value:'zwq' } } //当输入框数据发生改变时,数据跟着改变 input.oninput = function(){ data.valueObj.value = this.value; } // 更新视图 function upData(){ view.innerText = data.valueObj.value; } upData(data); obServe(data); // 监控某个对象是否发生改变 function obServe(data){ //判断当前传的是否是对象,如果不是,直接return if(!data || !(data instanceof Object)){return data}       //获取所有属性名。使用keys方法可以获取所有属性名(包括原型上的)并保存带数组中 var arrProperty = Object.keys(data);       //遍历数组,调用defindRective检测每一个属性值的改变  arrProperty.forEach(function(key){          defindRective(data,key,data[key]); //传入3个参数,当前对象,当前属性,当前属性值 }) } function defindRective(obj,key,val){ obServe(val); //使用递归,当想上面的数组,对象套对象的形式,由于里面的对象是一个引用值,无法检测里面的数据变化,所以使用递归。 Object.defineProperty(obj,key,{ //核心:使用Object,definPropert的set检测数据的改变。 set(newValue){ console.log(5); if(newValue == val) return val; val = newValue; upData(); //当数据变化,跟新视图 }, get(){ return val; } }) }
// 监测数组,将数组原型重写// 当操作数组的arr push pop unshift slice...才会检测 let {push} = Array.prototype; var arr = [1,2,3]; function upData(){ console.log('更新'); } Object.defineProperty(Array.prototype,'push',{ value:(function(){ return (...arg) => { upData(); push.apply(arr,arg); } })() }) arr.push(8,9);

由于使用Object.defineProperty检测数组和对象变化要分开实现。而且,当添加数据时,不会检测到的。

所以ES6中添加了Proxy来实现。

Proxy&reflect简介:植入代理的模式,以简洁易懂的方式控制对外部对象的访问,利用set,get方法控制属性的读写功能,还有其余的has,desProperty。。等方法。但proxy兼容性不好,使用时要注意。

proxy是一个构造函数,通过代理的方式将你想到代理的对象传给构造函数,并且需要传入参数对象对读和写进行控制。使用new方法实例化代理的对象,

此后,当修改,或添加属性都使用代理的对象。

let data = { value:'zwq',}// let data = [1,2];let oProxyData = new Proxy(data,{ set(target,key,value,receiver){ //传入4个参数 对象 属性 属性值 代理的对象 // target[key] = value; Reflect.set(target,key,value); //等同于上一步 upData();  }, get(target,key,receiver){ // console.log(target,key); Reflect.get(target, key); }, has(target,key){ //当使用in时触发当前函数。 return key in target; //in --检测对象能否访问该属性,能访问返回true,不能false,无论是在实例还是原型中。 }});console.log('valu' in oProxyData);function upData(){ console.log("更新啦");}oProxyData.value = 20;

本文来自 js教程 栏目,欢迎学习!

IE8 javascript 对象 Object.defineProperty相关问题

对象是无序属性的集合,而这些属性在创建是都带有一些特征值(可以理解为属性的属性,天生自带的),这些特征值是为了实现JavaScript引擎用的,因此JavaScript不能直接访问。

JavaScript通过这些特征值来定义属性的行为(属性是否删除,枚举,修改等)。

例如,在全局定义的属性是会挂载到window上的。当想删除window上的这个属性,是不可以的。也就是说window上的属性是不可配置的。delete window.obj //false

Function.prototype当你修改成其他值,其原始值并没有改变。是不可写的。

在比如,我们的for in是可以枚举原型链上属性的,但所有的原型顶端都是Object.prototype.但for in 并没有枚举出来。所以Object.prototype是不可枚举的。

属性分为两种类型:1数据属性 2访问器属性。例如:一般我们自己在对象设置的属性默认是数据属性,而Window上的那么属性是访问器属性。

怎样知道这个属性到底是数据属性还是访问器属性?

使用Object.getOwnPropertyDescriptor(属性所在的对象,属性)方法。 返回一个对象,当时访问器属性时,该对象属性有enumerable,configurable,get,set。当时数据属性,该对象返回的属性有value,writable,enumerable,configurable.

var obj = {name:'zwq',age:18};console.log(Object.getOwnPropertyDescriptor(obj,'name')); //name属性属性//{value: "zwq", writable: true, enumerable: true, configurable: true}console.log(Object.getOwnPropertyDescriptor(window,'name')); //window上的name属性时访问器属性//enumerable: true, configurable: true, get: ?, set: ?}

数据属性

● 数据上行包含一个数据值的位置,可以读取和写入值,数据属性有4个描述其行为的属性,由于是这些值不能直接访问,是内部值,所以该规范把他们放在两对括号中。

● 属性是否可配置:[[Configurable]]:表能否通过delete删除属性,能够修改属性的特性,能否把属性修改为访问器属性

● 属性是否可枚举:[[Enumerable]]:表能否通过for-in循环返回属性

● 属性是否可修改:[[Writable]]

● 属性的数据值 :[[value]]读取属性的时候,从这个位置读,写入属性的时候,把新值保存到这个位置。

普通定义的属性 默认值前三个都是true,最后一个是undefined。

当我们想到修改属性默认的特性,使用Object.defineProperty(属性所在对象,属性的名字,描述符对象)方法。

当使用Object.defineProperty方法第二个参数属性的名字不存在时,该方法会创建这个属性,并且该属性的特性除了value剩下的特性的默认值都是false。也就是说当你想让这个用Object.defineProperty方法创建的属性跟正常的属性一样可枚举,配置,写入,必须把这个属性值的特性都改为true。否则就是false。

var obj = {name:'zwq',age:18}; Object.defineProperty(obj,'name',{ 修改name属性的特性,值为haha,并且name属性不能修改值 value:'haha', writable:false //默认值是true,改为false,不可写。 }) Object.defineProperty(obj,'sex',{创建一个sex属性,这个属性不可枚举 value:'woman', writable:true, configurable:true, })

访问器属性

访问器属性不包含writable和value,他包含的是一对getter和setter函数,在读取访问器属性是,会调用getter函数,并返回有效的值,在写入访问器属性时(修改属性)会调用setter函数并传入新值。访问器包含4个特性

● 属性是否可配置:[[Configurable]]:表能否通过delete删除属性,能够修改属性的特性,能否把属性修改为访问器属性

● 属性是否可枚举:[[Enumerable]]:表能否通过for-in循环返回属性

● [[Get]]:在读取属性时调用的函数。默认值是undefined。

● [[Set]]:在写入(或修改)属性时调用的函数。默认值undefined。

定义访问器属性,同样也必须商用Object.defineProperty().

function Person(){ this._name = 'zwq', this.age = 18 } var person = new Person(); Object.defineProperty(person,'name',{ set(newValue){ console.log('set'); this._name = newValue //设置或修改属性时,会调用set函数,把设置的值通过参数传进去后,用一个变量或属性保存。并且当调用get,return就是返回的这个值 }, get(){ return this._name; //当读取属性时 返回return的值 } })

不一定非要同时指定getter和setter,只指定getter意味着属性是不能写。

vue的双向数据劫持绑定(主要应用于表单中)的原理就是利用Object.defineProperty来检测数据的变化。

双向劫持绑定时当视图(页面的某一元素)发生改变时,数据跟着改变,当数据改变时,视图也跟着改变。例如下面的输入框里面的内容改变时,数据(对象或数组)改变。检测数据改变。底下的p文本根据数据的改变而改变。

上面我们介绍到,当数据改变时会触发set方法。由此我们就可以检测数据的变化。

//检测对象的变化。     var input = document.getElementById('Oinput'); var view = document.getElementById('view'); var data = { valueObj :{ value:'zwq' } } //当输入框数据发生改变时,数据跟着改变 input.oninput = function(){ data.valueObj.value = this.value; } // 更新视图 function upData(){ view.innerText = data.valueObj.value; } upData(data); obServe(data); // 监控某个对象是否发生改变 function obServe(data){ //判断当前传的是否是对象,如果不是,直接return if(!data || !(data instanceof Object)){return data}       //获取所有属性名。使用keys方法可以获取所有属性名(包括原型上的)并保存带数组中 var arrProperty = Object.keys(data);       //遍历数组,调用defindRective检测每一个属性值的改变  arrProperty.forEach(function(key){          defindRective(data,key,data[key]); //传入3个参数,当前对象,当前属性,当前属性值 }) } function defindRective(obj,key,val){ obServe(val); //使用递归,当想上面的数组,对象套对象的形式,由于里面的对象是一个引用值,无法检测里面的数据变化,所以使用递归。 Object.defineProperty(obj,key,{ //核心:使用Object,definPropert的set检测数据的改变。 set(newValue){ console.log(5); if(newValue == val) return val; val = newValue; upData(); //当数据变化,跟新视图 }, get(){ return val; } }) }
// 监测数组,将数组原型重写// 当操作数组的arr push pop unshift slice...才会检测 let {push} = Array.prototype; var arr = [1,2,3]; function upData(){ console.log('更新'); } Object.defineProperty(Array.prototype,'push',{ value:(function(){ return (...arg) => { upData(); push.apply(arr,arg); } })() }) arr.push(8,9);

由于使用Object.defineProperty检测数组和对象变化要分开实现。而且,当添加数据时,不会检测到的。

所以ES6中添加了Proxy来实现。

Proxy&reflect简介:植入代理的模式,以简洁易懂的方式控制对外部对象的访问,利用set,get方法控制属性的读写功能,还有其余的has,desProperty。。等方法。但proxy兼容性不好,使用时要注意。

proxy是一个构造函数,通过代理的方式将你想到代理的对象传给构造函数,并且需要传入参数对象对读和写进行控制。使用new方法实例化代理的对象,

此后,当修改,或添加属性都使用代理的对象。

let data = { value:'zwq',}// let data = [1,2];let oProxyData = new Proxy(data,{ set(target,key,value,receiver){ //传入4个参数 对象 属性 属性值 代理的对象 // target[key] = value; Reflect.set(target,key,value); //等同于上一步 upData();  }, get(target,key,receiver){ // console.log(target,key); Reflect.get(target, key); }, has(target,key){ //当使用in时触发当前函数。 return key in target; //in --检测对象能否访问该属性,能访问返回true,不能false,无论是在实例还是原型中。 }});console.log('valu' in oProxyData);function upData(){ console.log("更新啦");}oProxyData.value = 20;

本文来自 js教程 栏目,欢迎学习!

JavaScript如何调试有哪些建议和技巧附五款有用的调试工具_javascript技巧

以下内容是关于javascript如何调试有哪些建议和技巧的相关知识,具体详情请看下文吧。

浏览器开发者工具

我个人最喜欢Chrome开发者工具。虽然Safari和Firefox无法达到Chrome那么高的标准,但它们也在逐渐改善。在Firefox中,可以将Firebug和Firefox开发者工具组合使用。如果Firefox小组在改进内置开发者工具方面继续表现优异的话,Firebug有一天可能会被淘汰。

先把个人偏好放在一边,你应该能够在目标浏览器中对任意代码进行试验和调试。你的目标浏览器可能包括著名的IE8,也可能不包括。

要熟悉你自己选择的开发者工具。你还可以从IDE(集成开发环境)或者第三方软件获得额外的调试支持。

在各种调试工具中,调试的基础知识是相通的。事实上,我是在90年代从Borland的C开发者环境中学习的调试基础。断点、条件断点、监视与最新版Chrome开发者工具是完全相同的。2000年左右,我在Java中捕获到第一例异常。堆栈跟踪(Stack traces)的概念依然适用,即使JavaScript术语将其称作错误(Error),检查堆栈跟踪仍然和以前一样有用。

有些知识点是前端开发特有的。例如:

DOM检查

DOM断点

调试事件

内存泄露分析

断点

使用debugger语句可以在源代码中增加断点。一旦到达debugger语句,执行中断。当前作用域的上下文出现在控制台中,还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。

在代码中还可以创建条件断点:

JavaScript

还可以根据自己需要在开发者工具中插入断点和条件断点。在Chrome开发者工具中,在Sources视图中点击行号即可增加断点。如果在断点上点击右键并选择“编辑断点(Edit Breakpoint)”,你还可以增加断点条件。

节点变化的断点

如果你的任务是调试垃圾代码,你可能会有这样的问题:为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提供了一种方便的断点,可用来检测元素树中的节点变化。

在Elements视图中,右键点击一个元素,从右键菜单中选择“Break on?”。

节点变化的断点

DOM断点的类型可能包括:

选定节点树状子目录(sub-tree)中的节点变化,

选定节点的属性发生变化,

节点被删除。

避免记录引用类型

当记录对象或数组时,原始类型的值在引用对象记录中可能会发生变化。当查看引用类型时一定要记住,在记录和查看期间,代码执行可能会影响观测到的结果。

例如,在Chrome开发者工具中执行以下代码:

JavaScript

记录的第二个和第三个属性的值是正确的,第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时,amount域的值就已经确定了。无论你对同一个引用关闭并重新打开多少次,这个值都不会变化。

记录参考类型

永远记得你在记录什么。记录原始类型时,使用带断点的watch表达式。如果是异步代码,避免记录引用类型。

表格记录

在一些开发者工具中,你可以用console.table在控制台中记录对象数组。

尝试在你的Chrome开发者工具中执行下列代码:

JavaScript

输出是非常好看的表格。所有原始类型都立刻显示出来,它们的值反应记录时的状态。也可以记录复杂类型,显示内容为其类型,内容无法显示。因此,console.table只能用来显示具有原始类型值的对象构成的二维数据结构。

XHR断点

有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码,XHR断点可以帮你节省时间。当提交某一特殊类型的AJAX时,XHR断点将会终止代码的执行,并将提交请求的代码段呈现给用户。

在Chrome开发者工具的Sources标签页中,其中一个断点类型就是XHR断点。点击+图标,你可以输入URL片段,当AJAX请求的URL中出现这个URL片段时,JavaScript代码将会中断。

事件断点

Chrome开发者工具可以捕获所有类型的事件,当用户按下一个键、点击一下鼠标时,可以对触发的事件进行调试。

异常时暂停

Chrome开发者工具可以在抛出异常时暂停执行JavaScript代码。这可以让你在Error对象被创建时观察应用的状态。

异常时暂停

代码片段

Sources标签页左侧面板上有一个代码片段(Snippet)子标签页,可用于保存代码片段,帮你调试代码。

如果你坚持使用控制台调试,反复写相同的代码,你应该将你的代码抽象成调试片段。这样的话,甚至还可以把你的调试技巧教给你的同事。

Paul Irish发布过一些基本的调试代码片段,例如在函数执行前插入断点。审查这些代码片段,并在网上搜索其他代码片段,这是很有价值的。

在函数执行前插入断点

如果你可以得到函数调用的源代码,你还可以在函数调用前插入断点来终止函数的执行。如果你想调试f函数,用debug(f)语句可以增加这种断点。

Unminify最小化代码

(译者注:unminify 解压缩并进行反混淆)

尽可能使用 source map。有时生产代码不能使用source map,但不管怎样,你都 不应该直接对生产代码进行调试。

(译者注:sourcemap 是针对压缩合并后的web代码进行调试的工具)

如果没有source map的话,你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮(Pretty Print Button)。格式化按钮{}位于源代码文本区域的下方。格式化按钮对源代码进行美化,并改变行号,这使得调试代码更加方便,堆栈跟踪更加有效。

格式化按钮只有在不得已时才会使用。从某种意义上来说,丑代码就是难看,因为代码中的命名没有明确的语义。

DOM元素的控制台书签

Chrome开发者工具和Firebug都提供了书签功能,用于显示你在元素标签页(Chrome)或HTML标签页(Firebug)中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素,

$0 表示C元素

$1 表示B元素

$2 表示A元素

如果你又选择了元素D,那么$0、$1、$2和$3分别代表D、C、B和A。

访问调用栈

JavaScript

Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。

性能审查

性能审查工具通常是很有用的。这些工具可以用于防止内存泄露,还可以检测到你的网站哪里需要优化。由于这些工具并不了解你的产品,你可以忽略其某些建议。通常来说,性能分析工具能够有效范围,可以使你的网站显著优化。

审查工具举例:

Chrome开发者工具的Audit标签页

YSlow

熟能生巧

你可能熟悉某些调试技巧,其他技巧也会帮你节省不少时间。如果你开始在实践中使用这些技巧,我建议你几周之后重新阅读本文。你将会惊奇地发现,你的关注点在几周内就发生了变化。

五个常用的js调试工具

JavaScript被称作以原型(prototype)为基础的语言。这种语言有很多特色,比如动态和弱类型,它还有一等函数(first class function)。另一个特点是它是一个多范型(multi-paradigm)语言,支持面向对象、声明式、函数式的编程风格。

JavaScript最初被用作客户端语言,浏览器实现它用来提供增强的用户接口。JavaScript在很多现代的网站和Web应用程序中都有应用。JavaScript的一个很棒的功能也很重要,就是我确实可以用它来提高或改善网站的用户体验。JavaScript也可以提供丰富的功能和交互的组件。

JavaScript在这技术高速发展的同时变得非常受欢迎。因为受欢迎JavaScript也改进了许多,修改JavaScript脚本有很多事要做。这次我们为开发者带来了几个非常有用的JavaScript调试工具。

1)Drosera

可以调试任何WebKit程序,不仅仅是Safari浏览器。

2)Dragonfly

源代码视图有语法高亮,可以设置断点。强大的搜索功能,支持正则表达式。

3)Getfirebug

可以在任何网页编辑、调试和实时监视CSS、HTML和JavaScript。

4)Debugbar

5)Venkman

Venkman是Mozilla的JavaScript调试器名称。它旨在为以Mozilla为基础的浏览器(Firefox, Netscape 7.x/9.x and SeaMonkey)提供一个强大的JavaScript调试环境。

ie8 javascript调试

如果用的是谷歌核心的浏览器,比如chrome,360浏览器,世界之窗CHROME版,按一下F12,浏览器底部将会显示这个窗口

    打开IE,也是按F12,请按一下红框的减号,如果不是,跳过这一步

    选择"控制台"

    在此处输入JS代码回车即可运行

    由于IE不支持直接在控制台trace输出,我们输入document.write("大家好")来执行查看结果

    谷歌浏览器调试远比IE强大,建议大家尽量使用谷歌浏览器好一点,多行代码可以先在记事本写好再复制进去执行

请选择console,这里是控制台输出窗口,在这里可以直接写JS代码,然后回车,代码会马上执行

现在说说用IE来测试JS代码,IE8版本以下的浏览器,不能即时执行代码,对学习效果不是很好,所以建议升级到至少IE8

旭新科技网还为您提供以下相关内容希望对您有帮助:

怎样在IE8里面调试javascript

1、在工具->Internet选项->高级,去掉“禁用脚步调试(Internet Explorer)”项的勾选。2、去掉“显示友好http错误信息”项的勾选。最后点击应用,确定按钮。3、预览表单,当要执行的js程序出现错误时,浏览器会给出提示。4...

IE8 javascript 对象 Object.defineProperty相关问题

Javascript作为一种语言,有个美誉,开发者可以重新定义任何事情。虽然这在过去的一些javascript可以,但是ECMAScript5中已经开始得到改变,例如,我们可以使用Object.defineProperty创建一个不能被修改的对象的属性。一、基本用法 假...

JavaScript如何调试有哪些建议和技巧附五款有用的调试工具_javascript...

JavaScript也可以提供丰富的功能和交互的组件。JavaScript在这技术高速发展的同时变得非常受欢迎。因为受欢迎JavaScript也改进了许多,修改JavaScript脚本有很多事要做。这次我们为开发者带来了几个非常有用的JavaScript调试工具。1)Drosera可以调试...

ie8 javascript调试

谷歌浏览器调试远比IE强大,建议大家尽量使用谷歌浏览器好一点,多行代码可以先在记事本写好再复制进去执行 请选择console,这里是控制台输出窗口,在这里可以直接写JS代码,然后回车,代码会马上执行 现在说说用IE来测试JS代码,IE8...

JavaScript开发App需要掌握哪些知识?

1. HTML,这是基本,最好自己能用 记事本 写一些静态的html,来加深印象。2. DHTML,这是 javascript 编程所要遇到的宿主对象,你要对这个对象进行访问或控制。(加点说明吧,javascript不单能运行在如IE之类的浏览器上,...

跨域怎么解决

先说明一点:我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript 场景一:将bbs.xxx的页面用iframe嵌入到xxx的中,如何在iframe内外使用js通信(转帖请注明出处:blog.csdn/lenel) 一级域名都是xxx 这个...

请说明JavaScript中处理事件的步骤,说说步骤吧,谢谢

[javascript] view plain copy function eventHandler(e) { e = e || window.event;var target = e.target || e.srcElement;... ...} e为事件对象,当事件触发时,作为参数传进来,但对于IE8及更低版本IE不适用...

java script学习方法

说明:if -else 语句是JavaScript中最基本的控制语句,通过它可以改变语句的执行顺序。表达式中必须使用关系语句,来实现判断,它是作为一个布尔值来估算的。它将零和非零的数分别转化成false和true。若if后的语句有多行,则必须使用花括号...

JavaScript文档节点和文本节点一样吗?

JavaScript中如何添加文本节点? 最简单的方法就是用元素的innerHTML属性赋值,如:myNewElement.innerHTML = “我是文本”;但这样不能清晰的体现DOM中新增加了一个文本节点。 然后另一种添加文本节点的方式,可分为两步: 1、创建节点:文...

内容管理系统的提供商

系统提供了配套的便于系统扩展及二次开发的各种说明文档,如:《数据库字段说明列表》、《产品使用说明书》、各种接口说明文档、功能介绍文档等。3.自定义权限代码用户如需要将自己设计的扩展功能整合到SiteFactory中,只需要进行一下简单的...

Top