JavaScript对象

xavier 发布于2019-08-23 11:01 / 807人阅读

摘要：对象的分类内置对象原生对象就是语言预定义的对象，在标准定义，有解释器引擎提供具体实现宿主对象指的是运行环境提供的对象。不过类型是中所有类型的父级所有类型的对象都可以使用的属性和方法，可以通过的构造函数来创建自定义对象。

对象

javaScript中的对象，和其它编程语言中的对象一样，可以比照现实生活中的对象来理解。在JavaScript中，一个对象可以是一个多带带拥有属性和类型的实体。和杯子做一下比较，一个杯子是一个对象，拥有属性，杯子有颜色、图案、重量等。同样，JavaScript也有属性来定义它的特征。
方法是关联到某个对象的函数，或者简单地说，一个方法是一个值为某个函数的对象属性，定义方法就像定义普通的函数，除了它们必须被赋给对象的某个属性。

对象的分类

内置对象/原生对象：就是JavaScript语言预定义的对象，在ECMAScript标准定义，有JavaScript解释器/引擎提供具体实现

宿主对象：指的是javaScript运行环境提供的对象。一般是由浏览器厂商提供实现(目前也有独立的JavaScript解释器/引擎提供实现)，主要分为BOM和DOM

自定义对象：就是由开发人员自主创建的对象

Object对象

Object类型与Array、Math等一样都是JavaScript的引用类型。不过Object类型是JavaScript中所有类型的父级(所有类型的对象都可以使用Object的属性和方法)，JavaScript可以通过Object的构造函数来创建自定义对象。当以非构造函数形式被调用时，Object等同于new Object()
Object对象的方法分为自有方法和原型方法两种：
自有方法
create():指定原型对象和属性来创建一个新的对象
getOwnOropertyNames():返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名
keys():返回一个数组，包含指定对象的所有自有可遍历属性的名称
原型方法
prototype.hasOwnProperty():返回一个布尔值，该值指示对象是否包含指定的属性

创建对象

1.对象的初始化器创建方式
var 对象名={

</>复制代码 
属性名:属性值,
方法名:function(){
    方法体
}

}

</>复制代码 
var obj={
    name : "张三",
    age : 20,
    sayMe : function(){
        console.log("我是张三");
    }
}

2.对象的构造函数方式
利用所有引用类型创建对应的对象
利用Object作为构造函数创建对象
var 对象名 = new Object();
var 对象名 = Object();

</>复制代码 
var obj = new Object();
var obj1 = Object();

3.利用Object.create()方法创建对象

</>复制代码 
//创建一个空对象：var 对象名 = Object.create(null)
var obj=Object.create(null);
/*当前创建的新对象拥有与obj对象相同的属性和方法：
  var 对象名 = Object.create(obj);
  obj表示另一个对象*/
var obj1=Object.create(obj2);

4.创建空对象

</>复制代码 
var obj={}

创建方式对比

Number、String和Boolean
字面量方式创建的是原始类型，构造函数方式创建是引用类型
Array和Object
无论是字面量方式还是构造函数方式创建的都是引用类型

变量、函数与对象

其实定义的变量就是某个对象的属性，定义的函数就是某个对象的方法
JavaScript中具有一个全局对象(Global)，仅存在于概念
1.浏览器运行环境，BOM中Window(窗口)对象
2.Node.js运行环境

</>复制代码 
var obj={
    name:"张三",
    age:20,
    sayMe:function(){
        console.log("我是张三");
    }
}

调用对象的属性

</>复制代码 
//1.对象名.属性名：不适用于复杂命名的属性名称
console.log(obj.name);
//2.对象名[属性名]：通用的调用方式，与数组类似，适用于复杂命名的属性名称
console.log(obj["name"]);
//访问一个对象不存在的属性，返回undefined
console.log(obj.age);//返回undefined

新增对象的属性

</>复制代码 
//1.对象名.新的属性名=属性值
obj.age=18;
//2.对象名[新的属性名]=属性值
obj["name"]="张三";

修改对象的属性

</>复制代码 
//1.对象名.已存在的属性名=属性值
obj.age=20;
2.对象名[已存在的属性名]=属性值
obj["name"]="李四";

删除对象的属性

</>复制代码 
1.delete 对象名.属性名
delete obj.age;
2.delete 对象名[属性名]
delete obj["name"];

检测对象的属性

1.判断对象的属性是否为undefined

</>复制代码 
if(obj.age!==undefined){
    console.log("obj对象的age属性存在...");
}else{
    console.log("请定义obj对象的age属性...");
}

2.判断对象的属性值，先转换为Boolean类型

</>复制代码 
if(obj.age){
    console.log("obj对象的age属性存在...");
}

3.利用in关键字进行判断

</>复制代码 
if("age" in obj){
    console.log("obj对象的age属性存在...");
}else{
    console.log("obj对象的age属性不存在...");
}

4.Object类型提供了hasOwnProperty()方法

</>复制代码 
if(obj.hasOwnProperty("age")){
    console.log("Obj对象的age属性存在...");
}else{
    console.log("obj对象的age属性不存在...");
}

遍历对象的属性

1.for...in语句

</>复制代码 
//创建一个对象
var obj={
    name:"张三",
    age:20,
    sayMe:function(){
        console.log("我是张三");
    }
}
//for...in语句
for(var objAttr in obj){
    //通过对象属性或方法对应的值的类型进行区别
    if(obj[objAttr] instanceof Function){
        //当前是对象的方法
        obj[objAttr]();
    }else{
        //当前是对象的属性
        console.log(obj[objAttr]);
    }
}

2.Object类型提供了keys()方法，只能遍历可枚举的属性

</>复制代码 
//创建一个对象
var obj={
    name:"张三",
    age:20,
    sayMe:function(){
        console.log("我是张三");
    }
}
//Object类型提供了keys()方法
var arr=Object.keys(obj);
for(var v in arr){
    var objAttr=arr[v];
    //通过对象属性或方法对应的值的类型进行区别
    if(obj[objAttr]) instanceof Function){
        //当前是对象的方法
        obj[objAttr]();
    }else{
        //当前是对象的属性
        console.log(obj[objAttr]);
    }
}

3.Object类型提供了getOwnPropertyNames()方法，包括不可枚举的属性

</>复制代码 
//创建一个对象
var obj={
    name:"张三",
    age:20,
    sayMe:function(){
        console.log("我是张三");
    }
} 
//Object类型提供了getOwnPropertyNames()方法
var arr=Object.getOwnPropertyNames(obj);
for(var v in arr){
    var objAttr=arr[v];
    //通过对象属性或方法对应的值的类型进行区别
    if(obj[objAttr] instanceof Function){
        //当前是对象的方法
        obj[objAttr]();
    }else{
        //当前是对象的属性
        console.log(obj[objAttr]);
    }
}

调用对象的方法

</>复制代码 
//创建一个对象
var obj={
    name:"张三",
    age:20,
    sayMe:function(){
        console.log("我是张三");
    }
}
//1.对象名.方法名()
obj.sayMe();
//2.对象名[方法名]()
obj["sayMe"]();

新增对象的方法

</>复制代码 
//创建一个新的对象
var obj={
    name:"李四",
    age:20,
    sayMe:function(){
        console.log("我是李四");
    }
}
//1.对象名.新的方法名=function(){}
obj.sayYou=function(){
    console.log("你是张三");
}
//2.对象名[新的方法名]=function(){}
obj[sayHe]=function(){
    console.log("他是大王");
}

修改对象的方法

</>复制代码 
//创建一个对象
var obj={
    name:"张三",
    age:20,
    sayMe:function(){
        console.log("我是张三");
    }
}
//1.对象名.方法名=function(){}
obj.sayMe=function(){
    console.log("你是李四");
}
//2.对象名[方法名]=function(){}
obj[sayMe]=function(){
    console.log("你是李四");
}

删除对象的方法

</>复制代码 
//创建一个对象
var obj={
    name:"张三",
    age:20,
    sayMe:function(){
        console.log("我是张三");
    }
}
//1.delete 对象名.方法名
delete obj.sayMe;
//访问对象中不存在的方法，报错(TypeError: obj.sayMe is not a function)
//2.delete 对象名[方法名];
delete obj[sayMe];

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96916.html

JavaScript 闯关记

摘要：对象数组初始化表达式，闯关记之上文档对象模型是针对和文档的一个。闯关记之数组数组是值的有序集合。数组是动态的，根闯关记之语法的语法大量借鉴了及其他类语言如和的语法。《JavaScript 闯关记》之 DOM（下） Element 类型除了 Document 类型之外，Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素...

mj 2019-08-21 18:45 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
JavaScript中的面向对象（object-oriented）编程

摘要：对象在中，除了数字字符串布尔值这几个简单类型外，其他的都是对象。那么在函数对象中，这两个属性的有什么区别呢表示该函数对象的原型表示使用来执行该函数时这种函数一般成为构造函数，后面会讲解，新创建的对象的原型。这时的函数通常称为构造函数。。本文原发于我的个人博客，经多次修改后发到sf上。本文仍在不断修改中，最新版请访问个人博客。最近工作一直在用nodejs做开发，有了nodejs，...

JerryZou 2019-08-21 10:26 评论0 收藏0
10分钟了解Javascript-天码营

摘要：然后将构造函数的原型设为，便实现了对象继承。首先，我们定义一个构造函数，并在其中定义一个局部变量。这里的是局部变量，其作用域仍然存在是闭包现象，而非对象属性。 Javascript是动态的，弱类型的，解释执行的程序设计语言。 Javascript极其灵活，支持多种程序设计范式：面向对象、指令式、函数式。JavaSCript最初被用于浏览器脚本，现在已经是所有主流浏览器的默认脚本语言。浏...

trigkit4 2019-08-21 13:33 评论0 收藏0
JavaScriptCore全面解析

摘要：可嵌入动态文本于页面，对浏览器事件作出响应，读写元素，控制等。年月，发布了一款面向普通用户的新一代的浏览器版，市场份额一举超过。网景将这门语言作为标准提交给了欧洲计算机制造协会。线程和的并发执行都是线程安全的。后面会详细讲解对象类型的转换。本文由云+社区发表作者：殷源，专注移动客户端开发，微软Imagine Cup中国区特等奖获得者 JavaScript越来越多地出现在我们客户端开...

OnlyMyRailgun 2019-08-23 14:54 评论0 收藏0
JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript

摘要：在中，并没有对抽象类和接口的支持。例如，当对象需要对象的能力时，可以有选择地把对象的构造器的原型指向对象，从而达到继承的效果。本节内容为设计模式与开发实践第一章笔记。动态类型语言编程语言按数据类型大体可以分为两类：静态类型语言与动态类型语言。静态类型语言在编译时已确定变量类型，动态类型语言的变量类型要到程序运行时，待变量被赋值后，才具有某种类型。而JavaScript是一门典型...

suxier 2019-08-21 10:44 评论0 收藏0