资讯专栏INFORMATION COLUMN

JavaScript核心语法——对象

philadelphia / 2944人阅读

摘要:张无忌对象的属性存在对象的属性不存在使用进行判断。张无忌对象的属性存在请先定义对象的属性使用语句进行判断张无忌对象的属性存在删除对象的属性可以用操作符删除一个不是继承而来的属性。

对象 对象的概述 对象是什么

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()。

创建对象 对象初始化器方式

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

  1.对象的初始化器创建方式
      var 对象名 = {
        属性名 : 属性值,
        方法名 : function(){
            方法体
        }
      }
 
var obj1 = {
    name : "张无忌",
    age : 18,
    sayMe : function(){
        console.log("我是张无忌");
    }
}
构造函数方式

构造函数时通过JavaScript提供的预定义类型的构造函数来创建对象的。
代码如下;

    对象的构造函数方式
       利用所有引用类型创建对应的对象 -> 具有具体的类型
        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();//Number类型
var num2 = Number();
var str = new String();//String类型
var boo = new Boolean();//Boolean类型
var obj2 = new Object();
var obj3 = Object();
console.log(obj2);//{}空对象
console.log(obj3);//{}空对象

var obj4 = new Object(undefined);
var obj5 = new Object(null);
console.log(obj4);//{}空对象
console.log(obj5);//{}空对象
Object.create()方法

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象。
参数;
1.proto参数;一个对象,作为新创建对象的原型
2.propertiesObject参数;可选。该参数对象是一组属性与值,该对象的属性名称试试创建的对象的属性名称,值是属性描述符。
代码如下;

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

一个JavaScript对象有很对属性。一个对象的属性可以解释成一个附加到对象的变量。对象的属性和普通的JavaScript变量基本没有什么区别,仅仅是属性属于某个对象。

var obj = {
    name : "张无忌",
    "Type-Content" : "text/html",
    sayMe : function(){
        console.log("我是张无忌");
    }
}
/*
    1.对象名.属性名
      * 不适用于复杂命名的属性名称
 */
console.log(obj.name);// 张无忌
// console.log(obj.Type-Content);

    2.对象名[属性名] - 通用的调用方式
       适用于复杂命名的属性名称
 
console.log(obj["name"]);// 张无忌
console.log(obj["Type-Content"]);// text/html

 访问一个对象不存在的属性 -> 值为 undefined
console.log(obj.age);
访问对象的属性

1.JavaScript可以通过点符号来访问一个对象的属性。

var emp = {
    ename:"Tom",salary:3500
};
emp.ename = "Tommy"//修改属性的值
console.log(emp.ename);//获取属性的值

2.JavaScript对象的属性也可以通过方括号访问。

var emp = {
    ename:"Tom",salary:3500
};
emp["ename"] = "Tony";//修改属性的值
console.log(emp["ename"]);//获取属性的值
遍历属性

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

var obj = {
    name : "张三",
    age : 18,
    sayMe : 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]);
    }
}
属性访问出错

当不确定对象是否存在、对象的属性是否存在时,可以使用错误处理结构try...catch语句块来捕捉抛出的错误,避免程序异常终止。

//访问未声明的变量
console.log(emp);

//访问未声明的属性
var emp = {};
console.log(emp.ename);

//访问未声明的属性的成员
console.log(emp.ename.length);
检查对象的属性

检查对象的属性可以使用以下四种方法检测对象中是否存在指定属性
1.使用关键字in

var obj = {
    name : "张无忌",
    age : 18
}

if ("age" in obj) {
    console.log("obj对象的age属性存在...");
} else {
    console.log("obj对象的age属性不存在...")

2.使用Object对象的hasOwnProperty()方法。

var obj = {
    name : "张无忌",
    age : 18
}

if (obj.hasOwnProperty("age")) {
    console.log("obj对象的age属性存在...");
} else {
    console.log("obj对象的age属性不存在...")
}

3.使用undefined进行判断。

var obj = {
    name : "张无忌",
    age : 18
}

if (obj.age !== undefined) {
    console.log("obj对象的age属性存在...");
} else {
    console.log("请先定义obj对象的age属性...");
}

4.使用if语句进行判断

var obj = {
    name : "张无忌",
    age : 18
}

if (obj.age) {
    console.log("obj对象的age属性存在...");
}
删除对象的属性

可以用delete操作符删除一个不是继承而来的属性。

var obj = {
    name : "张无忌",
    sayMe : function(){
        console.log("我是张无忌");
    }
}

    1.delete 对象名.属性名
    2.delete 对象名[属性名]
 
delete obj.name;
console.log(obj.name);// undefined
对象的方法 定义对象的方法

定义方法就像定义普通的函数,出了他们必须被赋予给对象的某个属性。

var obj = {
    name : "张无忌",
    age : 18,
    sayMe : function(){
        console.log("我是张无忌");
    }
}
// 1.对象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("你是周芷若");
}
console.log(obj);
// 2.对象名[新的方法名] = function(){}
调用对象的方法

对象方法的调用类似于对象属性的调用,很简单 有两种属性

var obj = {
    name : "张无忌",
    age : 18,
    sayMe : function(){
        console.log("我是张无忌");
    }
}
// 1.对象名.方法名()
obj.sayMe();
// 2.对象名[方法名]()
obj["sayMe"]();
删除对象的方法

可以用delete操作符删除对象
代码示例;

var obj = {
    name : "张无忌",
    age : 18,
    sayMe : function(){
        console.log("我是张无忌");
    }
}
// 1.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();// 方法调用
}

// 2.delete 对象名[方法名]

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

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

相关文章

  • Javascript Objects - Javascript语法基础 - Javascript核心

    摘要:创建对象对象直接量构造函数原型继承类继承对象拥有自有属性和继承属性。遍历顺序是以广度优先遍历所以使用便可以判断是否是对象自有的属性。可执行对象通过如下方法可以创建一个可执行对象既可以当作对象来使用有原型链,也可以当作函数来直接调用 原文: http://pij.robinqu.me/Javascript_Core/Javascript_Basics/Objects.html ...

    wzyplus 评论0 收藏0
  • JavaScript核心语法-基础语法

    摘要:基础语法区分大小写是一种区分大小写的语法,意味着的关键字变量名函数名以及其他一切的字符表示都要使用一致的大小写形式。化物语化物语空格和换行会忽略代码中出现的空格换行制表符。如果不用花括号独立独立编写一个语句,语法并不报错,但不推荐。 JavaScript基础语法 区分大小写 JavaScript是一种区分大小写的语法,意味着JavaScript的关键字、变量名、函数名以及其他一切的字符...

    soasme 评论0 收藏0
  • JavaScript 闯关记》之简介

    摘要:浏览器只是实现的宿主环境之一,其他宿主环境包括和。年月,版发布,成为国际标准。事件定义了事件和事件处理的接口。对于已经正式纳入标准的来说,尽管各浏览器都实现了某些众所周知的共同特性,但其他特性还是会因浏览器而异。 JavaScript 是面向 Web 的编程语言,绝大多数现代网站都使用了 JavaScript,并且所有的现代 Web 浏览器(电脑,手机,平板)均包含了 JavaScri...

    baihe 评论0 收藏0
  • 数组 - Javascript语法基础 - Javascript核心

    摘要:数组创建数组数组字面量使用构造函数数组本质上是所以要判断是不是数组,需要通过判断。数组长度使用属性获取元素的个数。例如函数的对象就是这样 原文: http://pij.robinqu.me/JavaScript_Core/JavaScript_Basics/Array.html 源代码: https://github.com/RobinQu/Programing-In-...

    molyzzx 评论0 收藏0
  • 学Java编程需要注意的地方

    摘要:学编程真的不是一件容易的事不管你多喜欢或是多会编程,在学习和解决问题上总会碰到障碍。熟练掌握核心内容,特别是和多线程初步具备面向对象设计和编程的能力掌握基本的优化策略。   学Java编程真的不是一件容易的事,不管你多喜欢或是多会Java编程,在学习和解决问题上总会碰到障碍。工作的时间越久就越能明白这个道理。不过这倒是一个让人进步的机会,因为你要一直不断的学习才能很好的解决你面前的难题...

    leanxi 评论0 收藏0
  • Javascript语句 - Javascript语法基础 - Javascript核心

    摘要:多数运算符都是由标点符号表示,比如和。通常会根据需要对操作数进行类型转换左值是一个古老的属于,它是指表达式只能出现在赋值运算符的左侧。也称为严格相等运算符,它用来检测两个操作数是否严格相等。运算符的检测规则是和运算符的求反。 源代码: https://github.com/RobinQu/Programing-In-Javascript/blob/master/chapters/...

    lavnFan 评论0 收藏0

发表评论

0条评论

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