博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【JavaScript】核心语法之对象
阅读量:7220 次
发布时间:2019-06-29

本文共 3515 字,大约阅读时间需要 11 分钟。

JS(JavaScript)

对象

一.对象
1.对象是什么;
理解成你所看到的任何物体独有属性并且使用方法
2.对象的分类;

  • 内置对象/原生对象;

是以ECMAScript为标准定义好的对象,可直接拿来使用

  • 宿主对象;

是以浏览器自身运行环境下提供的对象,并且才可使用

  • 自定义对象;

开发人自身创建的对象,并使用

二.创建对象;
1.对象初始化方法;
通过字面量创建对象

/*对象的初始化创建方式var 对象名 = {    属性名 : 属性值,    方法名 : function(){        方法体    }}    */var obj1 = {    name:'犬夜叉',    age: 16,    sayMe :function () {        console.log('我是犬夜叉');    }}

2.构造函数方法;

通过JS的预定义类型来创造对象

/*对象构造函数* 利用所用引用类型创建对应对象;具体类型  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 = new Object();console.log(obj2);console.log(obj3);

3.Object.create方法;

指定原型和多个指定属性对象

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

三.对象的属性;

1.调用对象的属性;
对象名.属性名;不能用复杂命名属性名称
对象名[属性名];能用复杂命名属性名称

var obj = {    name : '犬夜叉',    'Type-Content' : 'text/html',    sayMe : function(){        console.log('我是犬夜叉');    }}/*    对象名.属性名      * 不适用于复杂命名的属性名称 */console.log(obj.name);// 犬夜叉// console.log(obj.Type-Content);/*    对象名[属性名]-通用调用方式      * 适用于复杂命名的属性名称 */console.log(obj['name']);// 犬夜叉console.log(obj['Type-Content']);// text/html// 访问一个对象不存在的属性 -> 值为 undefinedconsole.log(obj.age);

2.新增对象的属性;

以两种属性表示
对象名.新的属性名 = 属性值
对象名[新的属性名] = 属性值

var obj = {    name : '漩涡鸣人',    sayMe : function(){        console.log('我是漩涡鸣人');    }}/*    对象名.新的属性名 = 属性值    对象名[新的属性名] = 属性值 */obj.age = 18;console.log(obj);/*  空对象默认没有自身的属性和方法(父级Object) */var obj1 = {};console.log(obj1);obj1.name = '日向雏田';console.log(obj1);

3.修改对象的属性;

var obj = {    name : '漩涡鸣人',    sayMe : function(){        console.log('我是漩涡鸣人');    }}/*    对象名.已存在属性名 = 属性值    对象名[已存在属性名] = 属性值 */obj.name = '日向雏田';console.log(obj);

4.删除对象的属性;

以delete表示删除该属性
delete 对象名.属性名
delete 对象名[属性名]

var obj = {    name : '犬夜叉',    sayMe : function(){        console.log('我是犬夜叉');    }}/*    delete 对象名.属性名    delete 对象名[属性名] */delete obj.name;console.log(obj.name);// undefined

四.对象的方法;

1.调用对象的方法;
有两种方法表示调用对象
对象名.方法名()
对象名[方法名]()

var obj = {    name : '犬夜叉',    age : 18,    sayMe : function(){        console.log('我是犬夜叉');    }}// 对象名.方法名()obj.sayMe();// 对象名[方法名]()obj['sayMe']();

2.新增对象的方法;

以function()来表示新增对象
对象名.新的方法名 = function(){}
对象名[新的方法名] = function(){}

var obj = {    name : '漩涡鸣人',    age : 16,    sayMe : function(){        console.log('我是漩涡鸣人');    }}// 对象名.新的方法名 = function(){}obj.sayYou = function(){    console.log('你是日向雏田');}console.log(obj);// 对象名[新的方法名] = function(){}

3.修改对象的方法;

var obj = {    name : '漩涡鸣人',    age : 16,    sayMe : function(){        console.log('我是漩涡鸣人');    }}// 1.对象名.方法名 = function(){}obj.sayMe = function(){    console.log('你是日向雏田');}console.log(obj);obj.sayMe();// 2.对象名[方法名] = function(){}

4.删除对象的方法;

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

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

转载地址:http://jphym.baihongyu.com/

你可能感兴趣的文章
Maven学习总结(四)——Maven核心概念
查看>>
window2003 支持flv文件设置
查看>>
除了你,其他人都挺努力的!
查看>>
DNS记录类型
查看>>
Effective C++: std::enable_shared_from_this
查看>>
linux: ln
查看>>
一天一个linux基础命令之添加用户useradd
查看>>
extern "c"的作用详解
查看>>
dbms_logmnr Unsupported SQLREDO
查看>>
centos7安装nginx和php
查看>>
Android Camera
查看>>
tornado 日志管理
查看>>
MySQL5.5多实例编译安装——多配置文件
查看>>
安装LoadRunner
查看>>
条件变量
查看>>
Nginx+ffmpeg搭建Apple Http Live Streaming笔记
查看>>
Hadoop的HA环境搭建
查看>>
Projects和Tasks
查看>>
开发者不可错过的开源工具 —— Android 篇
查看>>
决心书
查看>>