js高级部分--对象

xiaoxiao2021-02-28  15

一.js中的对象: 内置对象:Math RegExp Date Array String Function…… 宿主对象: DOM BOM ; 自定义对象; 二.原始数据类型:基本类型 引用类型; 基本类型:number string null undefined boolean ; 引用类型:Object Math RegExp Date Array Function; 基本包装类型:String Number Boolean ; 内存:堆 , 栈 基本类型的数据是存在在栈当中的; 引用类型和基本包装类型是存放在堆当中的; 基本类型按值访问; 引用类型和基本包装类型是按址(指针)访问的; 三.对象(Object) 一)定义:无序属性的集合 1 通过Object; 2.对象字面量; 二)属性的分类 1.数据属性

[[configurable]]:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true; [[enumberable]]:表示是否可以在 for...in 循环和 Object.keys() 中被枚举。默认true; [[writable]]:表示是否可修改属性的值。默认true; [[value]]:包含该属性的数据值。读取/写入都是该值。

2 访问器属性

[[configurable]]:是否可通过delete操作符删除重新定义属性; [[enumberable]]:是否可通过for-in循环查找该属性; [[set]]:写入(设置)属性时调用函数,默认:undefined;一旦属性被访问读取,此方法被自动调用。 [[get]]:读取(获取)属性时调用函数,默认:undefined;一旦属性被重新赋值,此方法被自动调用。

demo1:

/*1.用Object、对象字面量的方式自定义对象*/ /*对象自变量 :节约内存,少写代码*/ var obj = {name: '傻逼', ago: '236'}; console.log(obj.name + '@@@@' + obj.ago); /*obj*/ var obj1=new Object(); obj1.name='傻逼'; obj1.ago='236'; console.log(obj1.name+'%%&&'+obj1.ago);

demo2:

<!--分别设置对象里面的数据属性和访问器属性(在访问的时候能够拿到设置时的值)--> <script> /*设置数据属性*/ var obj={name:'空空',ago:'2365'}; Object.defineProperty(obj,'ago',{ value:'23' }); console.log(obj.ago); var temp=''; var obj1={name:'空空',ago:'2365'}; Object.defineProperty(obj1,'ago',{ set:function(a){ console.log(a);/*设置的值拿到了*/ temp=a; return temp; }, get:function(){ return temp; /*获取设置的值*/ } }); obj1.ago=1212;/*这是设置的值*/ console.log(obj1.ago);

demo3:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> button { display: block; margin-top: 23px; margin-left: 191px; } </style> </head> <body> <label>账号:<input type="text" id="account"></label> <label>密码:<input type="password" id="password"></label> <label> <button type="reset" id="reset">提交</button> </label> </body> <!--用对象字面量的方式自定义登录的写法(功能自己扩展:比如账号、密码的匹配校验是否登录成功等等)--> <script src="jQuery/jquery.min.js"></script> <script> var account1_reg = /^[a-z0-9]{3,16}$/; var pw_reg = /^[a-z0-9]{6,18}$/; var obj = {account: '', password: ''}; var flag = 0; var flag1 = 1; $('#reset').on('click',function(){ if( flag==1&& flag1==1){ location.href = "https://www.baidu.com/"; }else{ } }); $('#account').on('blur', function () { var aa = $('#account').val(); Object.defineProperty(obj,'account',{ set: function (a) { console.log(a); if (account1_reg.test(aa)) { alert('符合规则'); flag=1; } else { alert('请输入以0-9或者a-z的任意字符,共3-16位'); flag=2; } } }); obj.account=aa; }); $('#password').on('focus',function(){ if($('#account').val()==""){ alert("请输入账号信息"); }; }); $('#password').on('blur',function(){ var aa = $('#password').val(); Object.defineProperty(obj,'account',{ set: function (a) { console.log(a); if (pw_reg.test(aa)) { alert('符合规则'); flag1=1; } else { alert('请输入以0-9或者a-z的任意字符,共6-18位'); flag1=2; } } }); obj.account=aa; }) </script> </html>

demo4:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var obj={ name:'小黑', age:20, /*info:function(){ console.log(this.name+'----'+this.age); }*/ }; Object.defineProperties(obj,{ 'name':{ value:'花花' }, 'age':{ set:function(v){ console.log(v); } } }); console.log(obj.name); obj.age=10; </script> </body> </html>

demo5:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //定义对象--对象字面量(通过键值对的方式) /* 1 属性和属性值是用键值对的方便表达 2 函数里面的this指向的是obj */ var obj={ name:'小黑', age:20, info:function(){ console.log(this.name+'----'+this.age); } }; //删除对象的属性 // delete obj.name; // obj.name=undefined; // console.log(obj.name); Object.defineProperty(obj,'name',{ configurable:false, enumerable:false, value:'花花' }); delete obj.name; console.log(obj.name); for(var i in obj){ console.log(i,obj[i]); } //返回对象的所有键名的集合 var arr=Object.keys(obj); console.log(arr[0]); //属性的内部特性所设的值优先级要大于定义时属性值 obj.name='小黑'; console.log(obj.name); </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-1600193.html

最新回复(0)