资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/JavaScript-对象

JavaScript-对象

xeblog / 404人阅读

摘要：对象是什么在中，一个对象就像一个多带带拥有属性和类型的实体。一个杯子作为一个对象，杯子有颜色重量等属性。同样，对象也有属性定义它的特征。方法是关联到某个对象的函数，或者说，一个方法是一个值为某个函数的对象属性。

对象是什么

在JavaScript中，一个对象就像一个多带带拥有属性和类型的实体。一个杯子作为一个对象，杯子有颜色、重量等属性。同样，JavaScript对象也有属性定义它的特征。
方法是关联到某个对象的函数，或者说，一个方法是一个值为某个函数的对象属性。
对象可以分为以下几类

内置对象/原生对象

就是JavaScript语言预定义的对象

宿主对象

是JavaScript运行环境提供的对象

自定义对象

就是开发人员自主创建的对象

Object对象

Object类型是引用类型。但Object类型是所有JavaScript中所有类型的父级（所有类型的对象都可以是Object的属性和方法）

创建对象 
/*
* 1. 对象的初始化器创建方式
*     var 对象名=｛
*      属性名 : 属性值
*      方法名 : function{
*         方法体
*      ｝
*    ｝
*/
var obj = {
    name : "九筒",
    age : 2,
    sayYou : function () {
        console.log("火锅")
    }
};

/* 2. 对象的构造函数方式
*      * 利用所有的引用类型创建对应的对象->具有具体的类型
*        var num = new Number;//number类型
*        var str = new String;//string类型
*        var boo = new Boolean;//boolean类型
*      * 利用Object作为构造函数创建对象
*        var 对象名 = new Object();
*        var 对象名 = Object();
*/
var num = new Number();
var str = new Storage();
var boo = new Boolean();

var obj2 = new Object();
var obj3 = Object();

/*   利用Object.create创建对象
*      var 对象名 = Object.create(null) -> 创建一个空对象
      var 对象名 = Object.create(obj)
      * obj - 表示另一个对象
      * 特点 - 当前创建的新对象拥有与obj对象相同的属性和方法*/
var obj4 = Object.create(null);
var obj5 = Object.create(obj);
对象的属性 定义对象的属性

对象的属性就像是附加到对象上的变量

/*对象介意定义多个属性
*  属性之间使用逗号分开*/
var obj = {
    name : "吴凡",
    age : 23,
    book : function () {
        console.log("暗毁")
    }
};
调用对象的属性 
/*  调用对象的属性
*     对象名.属性名
*     不适用于复杂命名的属性名称*/
console.log(obj.name);

/*   对象名[属性名]-通用方式
     适用于复杂命名的属性名称
*     */
console.log(obj["name"]);//属性名是字符串形式
新增、删除、修改对象的属性 
var obj = {
    name : "火锅",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
}
   /* 新增对象的属性
   *    1对象名.新的属性名 = 属性值
   *    2对象名[新的属性名] = 属性值*/
obj.col="白色";
console.log(obj.col);//白色

   /*删除对象的属性
   * delete 对象名.属性名
   * delete 对象名[属性名]*/
delete obj.col
console.log(obj.col);//undefined

  /*修改对象的属性
  * 对象名.已存在的属性名 = 属性值
  * 对象名[已存在的属性名] = 属性值*/
obj.name = "九筒";
console.log(obj.name);//九筒
检测对象的属性 
var obj = {
    name : "火锅",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
};
console.log(obj.name)

/*   1. 判断对象的属性值是否为undefined*/
if (obj.name !==undefined){
    console.log("obj对象name属性存在")
}else{
    console.log("obj对象name属性不存在")
}

/*   2. 判断对象的属性值，先转换为boolean类型*/
if (obj.name){
    console.log("obj对象name属性存在")
}

/*   3. 利用in关键字进行判断*/
if ("name" in obj){
    console.log("obj对象name属性存在")
}else{
    console.log("obj对象name属性不存在")
}

/*   4. Object类型提供了hasOwnProperty()方法*/
if (obj.hasOwnProperty("name")){
    console.log("obj对象name属性存在")
}else{
    console.log("obj对象name属性不存在")
}
便利属性 
var obj = {
    name : "小薄荷",
    age : "0.3",
    variety : function () {
        console.log("萨摩耶")
    }
};
// 1.for...in语句
for (var objAttr in obj) {
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 2.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 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 : "火锅",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
}

/*调用对象的方法*/
// 1.对象名.方法名()
obj.sayMe();
// 2.对象名[方法名]()
obj["sayMe"]();

/*新增对象的方法*/
// 1.对象名.新的方法名 = function(){}
obj.name = function(){
    console.log("九筒");
}
console.log(obj);
// 2.对象名[新的方法名] = function(){}

/*修改对象的方法*/
// 1.对象名.方法名 = function(){}
obj.name = function(){
    console.log("九筒");
}
// 2.对象名[方法名] = function(){}

/*删除对象的方法*/
//1.delete 对象名.方法名
delete obj.sayMe;
// 访问对象中不存在的方法 -> 报错(TypeError: obj.sayMe is not a function)
// obj.sayMe();
// 2.delete 对象名[方法名]
海外云主机 云服务器 javascript对象 javascript 面向对象 javascript对象方法 JavaScript对象进阶

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

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

相关文章

  • JavaScript 闯关记

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

    mj 评论0 收藏0

  • JavaScript深入浅出

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

    blair 评论0 收藏0

  • JavaScript中的面向对象（object-oriented）编程

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

    JerryZou 评论0 收藏0

  • 10分钟了解Javascript-天码营

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

    trigkit4 评论0 收藏0

  • JavaScriptCore全面解析

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

    OnlyMyRailgun 评论0 收藏0

  • JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript

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

    suxier 评论0 收藏0

发表评论

登陆后可评论

0条评论

xeblog

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<