17、对象

属性:描述对象的信息  方法:描述对象的行为  封装:只关心输入和输出(不管过程如何实现)

ü 对象的分类:

内置对象(原生对象): 就是JavaScript语言预定义的对象(如String/Number)。

宿主对象: 一般由浏览器环境提供实现,主要分为 BOM 和 DOM。

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

ü 对象的创建:

  • Ø 初始化器方式

var 对象名 = {

        属性名 : 属性值 ,

        方法名 : function( ){方法体}    --- [相当于字面量定义函数的右半部分]          

     }

  • 构造函数方式

(1)var 对象名 = new Object( );       --- new - 关键字,表示创建一个新的对象

对象名.属性名 = 属性值;           --- Object - 在JavaScript中是对象的祖先

对象名.方法名 = function( ){  };

(2)自定义构造函数

  • Object.create( ) 方法

(1)   必须提前存在一个对象hero1

eg: var hero2 = Object.create(hero1);   ---创建的新对象具有与传递的对象相同的属性和方法

(1)   创建一个空对象

eg: var对象名= Object.create(null);   hero4.name = 'zhaomin';

u 使用对象

方法一                                  方法二

console.log(对象名.属性名);              console.log(对象名['属性名'] );

对象名.方法名( );                       对象名['方法名']( );

[注:不适用于复杂的命名方式]           [注:适用于复杂的命名方式] [用法更通用]

eg:  content-type: number  ---编写错误

‘content-type’: number; console.log(hero.content-type);  ---输出报错

将"-"解析为减法运算符;  hero.content -属性获取失败;  type - 不是一个变量

console.log(hero['content-type']);  ---正确

附:window对象

* 是BOM中的对象,表示当前浏览器的窗口; 也是浏览器环境中最顶级的对象(全局对象)

* 定义的全局变量和全局函数,为window对象添加的属性和方法

eg: var name = 'zhao min';

var sayMe = function ( ) {

console.log('my name is zhaomin');

}

console.log(window.name);

window.sayMe( );

u   操作对象的属性和方法

² 新增对象

对象名.新的属性名 = 属性值;         对象名.新的方法名 = function( ){ };

²  修改对象

对象名.原有属性名 = 新的属性值;     对象名.原有方法名 = function( ){ };

²  删除对象

delete 对象名.属性名                delete 对象名.方法名

u   遍历(枚举)对象

只知道对象名,但不清楚属性和方法名   typeof 或instanceof;

  • for…in循环:

该方法依次访问一个对象及其原型链中所有可枚举的属性。

格式:for (var A in对象名) {               A---代表了对象的属性名和方法名

if (typeof hero[A] == 'function'){    区分属性和方法 - typeof 运算符

hero[A]();             --- 一定是对象的方法

} else {

console.log(hero[A]);      --- 一定是对象的属性

}

结果:得到指定对象的所有属性或方法名

  • Object.keys( obj ) 方法:

obj ---表示遍历的当前对象      返回值: 一个包含当前对象所有属性名和方法名的数组    eg: var a = Object.keys(hero);  console.log(a);   // ["name", "age", "sayMe"]

  • Object.getOwnPropertyNames( object ) 方法:

该方法同上。

u   检测对象的属性或方法(即检测对象中是否存在指定属性:)

*使用 in 关键字                        console.log( 'name' in fn );

使用 Object对象的 hasOwnProperty()方法  console.log( fn.hasOwnProperty( 'name' ));

使用 undefined 进行判断                 console.log( fn.name = = = undefined );

使用 if 语句进行判断。       if( fn.name ){

console.log( 'name属性存在' );

}

注:调用对象不存在的的属性 ---undefined

调用对象不存在的的方法 ---输出报错 is not a function

18、函数与对象

JavaScript基础知识(对象、函数与对象)的更多相关文章

  1. JavaScript基础知识(函数)

    函数的基础 函数: 把实现相同功能的代码放到一个函数体中,当想实现这个功能时,直接执行这个函数即可:减少了的冗余:高内聚,低耦合--> 函数的封装: 函数:引用数据类型: var a = 10; ...

  2. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  3. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  4. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  5. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  6. Javascript基础知识总结一

    Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  8. JavaScript基础知识(JSON、Function对象、原型、引用类型)

    19.JSON 概念:JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的数据交换格式  特点:易于程序员编写和查看:易于计算机解析和生成 数据结构 ...

  9. 林大妈的JavaScript基础知识(三):JavaScript编程(1)对象

    1. 对象的简单介绍与一些注意事项 JavaScript中具有几个简单数据类型:数字.字符串.布尔值.null值以及undefined值.除此之外其余所有值(包括数组.函数,甚至正则表达式)都是对象. ...

随机推荐

  1. 自学Zabbix1.1-简介

    1. 初识Zabbix 是一个高度集成的网络监控解决方案,可以提供企业级的开源分布式监控解决 方案,由一个国外的团队持续维护更新,软件可以自由下载使用,运作团队靠提供收费的技术支持赢利.        ...

  2. mysql千万级数据表,创建表及字段扩展的几条建议

    一:概述 当我们设计一个系统时,需要考虑到系统的运行一段时间后,表里数据量大约有多少,如果在初期,就能估算到某几张表数据量非常庞大时(比如聊天消息表),就要把表创建好,这篇文章从创建表,增加数据,以及 ...

  3. Selenium与phantomJS 登入豆瓣 有bug

    # -*- coding:utf-8 -*- from selenium import webdriver from selenium.webdriver.common.keys import Key ...

  4. 工作随笔——ember框架去除url上的#号

    因为工作原因,接触到了一套非常好的前端框架--ember. ember框架高度封装,学习曲线比较陡峭. ember对于url更新的配置在config/environment.js >> l ...

  5. 《深入浅出Netty》【PDF】下载

    <深入浅出Netty>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062563 内容简介 本文档主要讲述的是深入浅出Netty: ...

  6. 【python】元组

    Python 3.6.0 (v3.6.0:41df79263a11, Dec 23 2016, 07:18:10) [MSC v.1900 32 bit (Intel)] on win32Type & ...

  7. layui样式修改记录

    记录以免遗忘: .layui-elem-quote{ padding 15 改为 5 }

  8. ios单独的页面支持横竖屏的状态调整,HTML5加载下(更新2)

    单独的页面支持横竖屏的状态调整,HTML5加载下 工程中设置只支持竖屏状态,在加载HTML5的界面可以是横竖屏的,在不对工程其他界面/设置做调整的同时,可以这样去 #import "View ...

  9. jsp程序设计:jstl之JSTL标签库

    转载自:http://www.blogjava.net/haizhige/archive/2008/10/26/236783.html,个人进行了一些修改. 前言:写一个taglib一般可以继承Sim ...

  10. 关于llvm kaleidoscope: 记一次Debug血泪之路

    简而言之,慎(bu)用(yong)全局变量! 这次debug基本上花了我一周的时间,我基本上是晚上9点30下自习回然后调试到11点30,如此反复一周直到今天周五终于解决了,,以前都听说前辈们 说尽量不 ...