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 ...
随机推荐
- 题目1004:Median(查找中位数)
问题来源 http://ac.jobdu.com/problem.php?pid=1004 问题描述 给你两个非降序序列,让你求中位数.中位数为第(n+1)/2个数(从0开始计算). 问题分析 这个问 ...
- Q64 最小路径和
给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [ [1,3,1], [1,5,1], ...
- Android动画及滑动事件冲突解决(转载)
原文链接:http://blog.csdn.net/singwhatiwanna/article/details/38168103 Android开发中动画和事件处理是程序员迈向高手的必经之路,也是重 ...
- Mac 10.12安装迅雷2.7.2
说明:主要是老版本难找,这个版本最好用. 下载: (链接: https://pan.baidu.com/s/1qXTldI8 密码: dmfe)
- 开源:我的Android新闻客户端,速度快、体积小、支持离线阅读、操作简便、内容展现形式丰富多样、信息量大、功能全面 等(要代码的留下邮箱)
分享:我的Android新闻客户端,速度快.体积小.支持离线阅读.操作简便.内容展现形式丰富多样.信息量大.功能全面 等(要代码的留下邮箱) 历时30天我为了开发这个新闻客户端APP,以下简称觅闻 h ...
- (转)QEMU 使用的镜像文件:qcow2 与 raw
原文:https://www.ibm.com/developerworks/cn/linux/1409_qiaoly_qemuimgages/ qcow2 的基本原理 qcow2 镜像格式是 QEMU ...
- 【转发】Webdriver使用自定义Firefox Profile运行测试
点击进入转发地址: 一般我们使用如下代码启动Firefox: 这样Selenium Server启动的Firefox将是一个全新的,不安装任何Add-On的Firefox. 如果有需要,我们可以使用我 ...
- python-pymongo使用
#-*- coding: utf-8 -*- #python2.7x from pymongo import MongoClient def get_db(): #建立连接 client = Mong ...
- C#定义一个类,并生成属性的例子
class Person { private string name; private string age; private string job; public Person(string nam ...
- Debian 9 启动后进入命令行
打开 default grub 配置 $ sudo vi /etc/default/grub 修改以下3处内容 1. 找到行 GRUB_CMDLINE_LINUX_DEFAULT="quie ...