JavaScript...对象...

xuxueli 发布于2019-08-23 11:01 / 3269人阅读

摘要：对象对象是什么中的对象和其他编程语言中的对象一样可以比照现实上活中的对象来理解它中对象的概念可以比照现实生活中实实在在的物体来理解在中一个对象可以是一个多带带的拥有属性和类型的实体拿它和一个杯子做下类比一个杯子是一个对象拥有属性杯子有颜色图案

对象

对象是什么

JavaScript中的对象和其他编程语言中的对象一样可以比照现实上活中的对象来理解它
JavaScript中对象的概念可以比照现实生活中实实在在的物体来理解
在JavaScript中一个对象可以是一个多带带的拥有属性和类型的实体拿它和一个杯子做下类比一个杯子是一个对象拥有属性杯子有颜色图案重量等等同样JavaScript对象也有属性来定义它的特征

对象的分类

1.内置对象/原生对象
就是JavaScript语言预定义的对象在ECMAScript标准定义由JavaScript解释器/引擎提供具体实现
2.宿主对象
指的是JavaScript运行环境提供的对象一般是由浏览器厂商提供实现(目前也有独立的JavaScript解释器/引擎提供实现)主要分为BOM和DOM
3.自定义对象
就是由开发人员自主创建的对象

Object对象

-Object对象是什么
Object类型与Array Math等一样都是JavaScript的引用类型不过Object类型是JavaScript中所有类型的父级(所有类型的对象都可以使用Object的属性和方法)
JavaScript可以通过Object的构造函数来创建自定义对象当以非构造函数形式被调用时 Object等同于new Object()0

创建对象

对象初始化器方式

使用对象初始化器也被称作通过字面值创建对象

</>复制代码 
/*
    1. 对象的初始化器创建方式
      var 对象名 = {
         属性名: 属性值,
         方法名: function(){
             方法体
         }
     }
*/
var boj1 = {
    name : "xxx",
    age : 38 ,
    sayMe : function () {
        console.log("我是xxx")
    }
}

构造函数方式

1.通过JavaScript提供的预定义类型的构造函数来创建对象

</>复制代码 
var num = new Number();//Number类型
var str = new String();//String类型
var boo = new Boolean();//Boolean类型

2.通过JavaScript提供的Object类型的构造函数来创建自定义对象

</>复制代码 
var obj = new Object();//创建一个自定义对象

Object.create()方法

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象
var 对象名 = Object.create(null) - 创建一个空对象
var 对象名 = Object.create(obj)
obj - 表示另一个对象
特点 - 当前创建的新对象拥有与obj对象相同的属性和方法

对象与变量

</>复制代码 
var obj = 100;
console.log(obj);//100
obj = {
    name : "xxx",
    sayMe : function () {
        console.log("这是xxx");
    }
};
//{ name: "xxx", sayMe: [Function: sayMe] }
console.log(obj);

对象的复制

</>复制代码 
var obj1 = {
    name : "xxx",
    sayMe : function () {
        console.log("这是xxx")
    }
}
console.log(obj1);
var obj2 = obj1;
console.log(obj2);
//修改obj1对象的name属性
obj1.name = "yyy";
console.log(obj1);
console.log(obj2);
//循环遍历对象 - for...in 语句
for(var attr in obj1){
    console.log(attr);
}

对象的属性

调用对象的属性

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

新增对象的属性

</>复制代码 
var obj = {
    name : "xxx",
    sayMe : function () {
        console.log("我是xxx");
    }
}
/*
     1.对象名 .新的属性名 = 属性值
     2.对象名[新的属性名] = 属性值
*/
obj.age = 18;
console.log(obj);
/*
     空对象默认没有自身属性和方法(父级Object)
*/
var obj1 = {};
console.log(obj1);
obj1.name = "yyy";
console.log(obj1);

修改对象的属性

</>复制代码 
var obj = {
    name : "xxx",
    sayMe : function(){
        console.log("我是xxx");
    }
}
/*
    1.对象名.已存在的属性名 = 属性值
    2.对象名[已存在的属性名] = 属性值
 */
obj.name = "yyy";
console.log(obj);

删除对象的属性

</>复制代码 
var obj = {
    name : "xxx",
    sayMe : function(){
        console.log("我是xxx");
    }
}
/*
    1.delete 对象名.属性名
    2.delete 对象名[属性名]
 */
delete obj.name;
console.log(obj.name);// undefined

检测对象的属性

可以使用下面四种方法检测对象中是否存在指定属性:

</>复制代码 
var obj = {
    name : "xxx",
    age : 18
}
console.log(obj.age);// undefined
// 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属性不存在...")
}

遍历对象的属性

JavaScript属性提供了三种原生方法用于遍历或枚举对象的属性:
1.for..in循环:该方法依次访问一个对象及其原型链中所有可枚举的属性
2.Object.keys(object)方法:该方法返回一个对象 o 自身包含(不包括原型中)的所有属性的名称的数组
3.Object.getOwnPropertyNames(object)方法:该方法返回一个数组它包含了对象 o 所有拥有的属性(无论是否可枚举)的名称

对象的方法

调用对象的方法

对象方法的调用类似于对象属性的调用

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

新增对象的用法

</>复制代码 
var obj = {
    name : "xxx",
    age : 18,
    sayMe : function(){
        console.log("我是xxx");
    }
}
// 对象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("你是yyy");
}
console.log(obj);

删除对象的方法

</>复制代码 
var obj = {
    name : "xxx",
    age : 18,
    sayMe : function(){
        console.log("我是xxx");
    }
}
// delete 对象名.方法名
delete obj.sayMe;
// 访问对象中不存在的方法 -> 报错(TypeError: obj.sayMe is not a function)
// obj.sayMe();
console.log(obj.sayMe);// undefined
console.log(obj);
// 以属性是否存在的方式进行判断
if ("sayMe" in obj) {
    // 确认目前是一个方法
    if (obj.sayMe instanceof Function) {
        obj.sayMe();// 方法调用
    }
}
// 以上代码可以优化为以下代码
if ("sayMe" in obj && obj.sayMe instanceof Function) {
    obj.sayMe();// 方法调用
}

GPU云服务器云服务器 javascript对象 javascript 面向对象 javascript对象方法 JavaScript对象进阶

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

转载请注明本文地址：https://www.ucloud.cn/yun/96913.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