JavaScript的进阶之路(四)理解对象1
对象是JavaScript的基本数据类型。简单的名值对组成了对象,BUT:还可以从一个被称为原型的对象继承属性,对象的方法通常就是继承的属性。
对象最常见的用法有:创建、设置、查找、删除、检测、枚举它的属性。
三类对象
- 内置对象:Array Function Date RegExp
- 宿主对象:HTMLElement对象
- 自定义对象:由运行中的JavaScript代码创建的对象
两大属性
- 自有属性(own property)直接在对象中定义的属性
- 继承属性(inherited property)从原型对象中继承的属性
创建对象
//简单的创建对象
var o={};
var o1={x:1,y:2};
var o3={x:o1.x,y:o1.y+1};
var o4={x:1,y:2,z:{x:3,y:4}};
var books={
"main title":"main title",
ah:"jack",
name:"name"
};
var o5= new Object();
var o6=Object.create({x:1,y:2,z:function(){}});
//通过原型继承创建一个新对象
function inherit(p){
if(p==null){
throw TypeError();
}
if(Object.create){
return Object.create(p);
}else{
var t= typeof(p);
if(t!=="object" && t!== "function"){
throw TypeError();
}else{
function f(){};
f.prototype=p;
return new f();
}
}
}
//通过继承设置对象的属性
var o7=inherit(o6); //这里o7继承了o6
o7.y=3;
console.log(o7.y); //覆盖了继承的属性 3
console.log(o6.y); //原型中的属性不变 2
console.log(o7.x); //继承了原型的属性 1查询和设置属性
var books={
"main title":"main title",
ah0:"Jack",
ah1:"Dava",
name:"name"
};
var title=books["main title"];
var ah=books.ah;
books.time="2017-05-01";
books.ah="Dava";
console.log(ah); //jack
console.log(books.time);
//var lens=books.subtitle.length; //这里会报错
var len=books && books.subtitle && books.subtitle.length; //短路写法不报错
console.log(len); //undefined
//数组写法相对灵活
var ah = "";
for(var i=0;i<2;i++){
ah +=books["ah"+i]+" ";
}
console.log(ah);删除属性
//删除属性
console.log(books.name);
delete books["name"];
delete books["main title"];
console.log(books["main title"]);
console.log(books.name);
var x = 1;
function f(){};
delete f; //不能删除全局函数
delete x; //不能删除var全局变量
console.log(x);
console.log(f);检测属性
//检测属性
var obj = {x:1};
console.log("x" in obj); //不管继承的还是自有的 都返回true
console.log(obj.x !== undefined); //同in方法,但不能区分x=undefined这种情况
//常见的用法
if(o.x!=null){} //如果o中含有x属性,且x的不是null和undefined
if(o.x){} //如果o中含有x属性,且不是null、undefined、0、NaN、false。即o.x不能转换成false
console.log(obj.hasOwnProperty("x")); //检测自有属性
console.log(obj.propertyIsEnumerable("x")); //检测可枚举的自有属性枚举属性
//枚举属性
var o6={x:1,y:2,z:{x:1,y:2},f:function(){}};
var o11 = inherit(o6);
for(var p in o6){
if(!o6.hasOwnProperty(p)) continue; //这里跳过继承的属性
if(typeof o6[p]==="function") continue; //这里跳过方法
console.log(p); //for in 方法遍历对象所有可枚举的属性 包括自有属性和继承属性
}
console.log(Object.keys(o6)); //返回一个数组,由对象中可枚举的自有属性的名称组成
console.log(Object.getOwnPropertyNames(o6)); //返回一个数组,由对象中所有自有属性的名称组成属性getter和setter
//属性getter和setter var v={
Name:"吴琼",
Age:28,
set r(name){this.Name = name;},
get r(){return this.Name;},
set s(age){this.Age = age;},
get s(){return this.Age;},
get f(){return this.Age;}
}
//读取get
console.log(v.Name); //吴琼
console.log(v.Age); //
console.log(v.r); //吴琼
console.log(v.f); //
//设置set
v.r="张红";
v.s=27;
console.log(v.Name); //张红
console.log(v.Age); //
console.log(v.r); //张红
console.log(v.f); //属性的特性
//属性的特性:值value(get) 可写性writable(set) 可枚举性enumerable 可配置性configurable
//得到自有属性的描述符,想要获得继承属性的描述符,需要遍历原型链Object.getPrototypeOf()
//返回一个对象{value: "张红", writable: true, enumerable: true, configurable: true}
//对不存在的属性和继承属性返回undefined
console.log(Object.getOwnPropertyDescriptor(v,"Name"));
//设置属性的描述符Object.defineProperty Object.defineProperties()
Object.defineProperty(v,"Name",{value:"欧红",writable:true,numerable:false,configurable:true});
Object.defineProperties(v,
{
"Name":{value:"欧红",writable:true,numerable:false,configurable:true},
"Age":{value:18,writable:true,numerable:false,configurable:true}
}
);
console.log(v.Name);
console.log(v.Age);
//不能随便修改属性的特性,必须遵循某些规则 如果属性是不可配置的
JavaScript的进阶之路(四)理解对象1的更多相关文章
- JavaScript学习笔记(十四)——对象
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- JavaScript的进阶之路(四)理解对象2
对象的三个属性 原型属性 1.var v={}的原型是Object.prototype;继承了一个constructor属性指代Object()构造函数,实际的原型是constructor.proto ...
- JavaScript的进阶之路(六)理解函数
函数:定义一次,多次调用:用于对象的属性则称为对象的方法:在JavaScript中,函数即对象:嵌套的函数形成闭包: 定义函数和简单调用函数: //函数定义 function f1(){ //没有参数 ...
- JavaScript的进阶之路(五)理解数组1
数组是值得有序结合,每个值叫做一个元素,每个元素的位置称为索引,索引从0开始. 在JavaScript中,数组是对象的特殊形式.继承自Array.prototype中的属性,有丰富的数组操作方法. 通 ...
- JavaScript的进阶之路(五)理解数组2
数组方法 //定义一个测试数组 var array1 = [1,2,5,null,"a"]; //join()方法是String.split()方法的逆操作,后者是将字符串分割成若 ...
- 深入理解javascript函数进阶系列第四篇——惰性函数
前面的话 惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了.本文将详细介绍惰性 ...
- JavaScript正则进阶之路——活学妙用奇淫正则表达式
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 有些童鞋肯定 ...
- 《JavaScript高级程序设计》读书笔记 ---理解对象
上一章曾经介绍过,创建自定义对象的最简单方式就是创建一个Object 的实例,然后再为它添加属性和方法,如下所示.var person = new Object();person.name = &qu ...
- JavaScript的进阶之路(七)客户端JavaScript知识点总结
一.客户端JavaScript主要是BOM DOM的操作和js脚本的兼容性.互用性.可访问性.安全性的应用.以及一些框架的引用. 二.BOM:浏览器对象模型 主要介绍window对象 1.定时器:se ...
随机推荐
- leetcode-278-First Bad Version(注意不要上溢)
题目描述:(说明中有简单翻译) You are a product manager and currently leading a team to develop a new product. Unf ...
- 基于CH340的一键下载电路
一.CH340简介 CH340 是一个 USB 总线的转接芯片,实现 USB 转串口或者 USB 转打印口.CH340是国产芯片,应用场合居多,市场占有率很高.常用的USB转串口芯片还有CP2102. ...
- 在 iOS 中使用 iconfont
如何使用自定义字体 在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的.这里以KaushanScript-Regular为例: Step 1: 导入字体 ...
- 爬虫之chrome浏览器的使用方法
chrome浏览器使用方法介绍 1. 新建隐身窗口 1.1 为什么需要新建隐身窗口 在打开隐身窗口的时候,第一次请求某个网站是没有携带cookie的,和代码请求一个网站一样,不携带cookie.这样就 ...
- 2019.04.18 第六次训练 【2018-2019 ACM-ICPC, NEERC, Southern Subregional Contest, Qualification Stage】
题目链接: https://codeforces.com/gym/101911 又补了set的一个知识点,erase(it)之后it这个地址就不存在了,再引用的话就会RE A: ✅ B: ✅ C: ...
- js数字动画
项目中需要的数字动画效果,网上找不到需要的效果,所以自己写了一个. 不多说,直接上干货:
- jni使用javap查看java类方法签名
在Jni开发中,需要回调给java层数据,因此使用java的方法签名是必不可少的. 快速定位java方法签名的方式: java方法签名由(函数参数列表)返回值组成. cmd运行:javap -s 字节 ...
- Hive 外部表新增字段或者修改字段类型等不生效
标题比较笼统,实际情况是: 对于Hive 的分区外部表的已有分区,在对表新增或者修改字段后,相关分区不生效. 原因是:表元数据虽然修改成功,但是分区也会对应列的元数据,这个地方不会随表的元数据修改而修 ...
- mysql 索引的简单使用
1 索引(index) 索引是一个单独的.物理的数据库结构, 它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单 他的作用和字典的目录是一样的,就是为了加快查询的速度 ...
- Nginx教程(7) 正向代理与反向代理【总结】
1.前言 最近工作中用到反向代理,发现网络代理的玩法还真不少,网络背后有很多需要去学习.而在此之前仅仅使用了过代理软件,曾经为了访问google,使用了代理软件,需要在浏览器中配置代理的地址.我只知道 ...