一、对象理解

现实世界 万物皆对象, 一切事物都是对象 对象还是一个具体的事物

对象: 特征和行为组成  特征是名词 用来描述对象的, 行为是动词

程序中的对象
是对现实世界中事物的抽象
1. js中的对象其实就是生活中的一个抽象
2. js中的对象是一个无序属性的集合
3. 其属性可以包含基本值,对象或函数,对象就是一组没有顺序的值
4. 对象的行为和特征
行为: 方法
特征: 属性 如何创建一个对象, 如何使用对象的成员
对象: 属性和方法 称为成员 this在对象中代表的是当前对象

1.字面量创建对象

var dog = {
name: 'puppy',
type: '中华田园犬',
age: 2,
color: 'yellow',
bark: function () {
console.log(this.name + 'wang wang wang')
},
eat: function () {
console.log(this.name + '啃骨头')
}
} 属性访问
console.log(dog.name);
console.log(dog.type); 另一种访问属性的方法
console.log(dog['name']); 方法访问
dog.bark();
dog.eat(); 函数和方法的区别
函数: 独立存在的就是函数 函数名() 调用
方法: 属于对象的函数 对象名.方法() 调用

2. new Object创建对象并动态添加属性

2. new Object()
Object 是一个构造函数
new的方式来调用的构造函数
new Object() 调用构造函数 会在内存中创建一个对象 // 动态添加属性和方法
var hero = new Object(); 创建一个空对象
hero.name = 'huangzhong';
hero.weapon = ''攻击;
hero.equipment = ['tk','gj','kj'];
hero.attack = function () {
console.log(this.name +':attack lalala')
}
hero.attack();

3. 工厂函数创建对象

function createHero (name,weapon,equipment,blood) {
var hero = new Object();
// 返回一个空的对象
hero.name = name;
hero.weapon = weapon;
hero.equipment = equipment;
hero.blood = blood;
hero.attack = function () {
console.log(this.name + ': 攻击')
}
return hero;
} var hero1 = createHero('huangzhong','gongjian',['toukui','xuezi'],100);

4.自定义构造函数创建对象

命名: 遵从帕斯卡规则, 第一个单词的第一个姊妹大写,后续的每个单词首字母大写
function Hero(name,weapon,equipment,blood) {
// this 动态给对象增加成员 this 指向当前对象
this.name = name;
this.weapon = weapon;
this.equipment = equipment;
this.blood = blood;
this.attack = function () {
console.log(this.name + 'attacking')
}
} var hero1 = new Hero('huangzhong','gongjian','toukui',100)

二、 new关键字和this

1. new关键字的执行过程

1. 在内存中创建了一个空的对象
2. 让构造函数中的this指向刚刚创建的对象
3. 执行构造函数, 在构造函数中设置函数和方法
4. 返回了当前对象

2. this出现的三个地方

1. 在方法中  this 指向的是这个方法所属的对象
2. 函数中 指向window
3. 构造方法中 this就是构造函数中创建的对象

三、对象的操作案例

案例1:  for in 遍历对象

var obj = {
name: 'zs',
age: 18,
sex: 'male',
sayHi: function () {
console.log(this.name + ': hello');
}
}
for (var key in obj) {
console.log(key + '---' + obj[key]);
}

添加属性

for (var i = 0; i < 10; i++) {
o['a' + i] = i * 2
}

删除成员delete

var o = {
name: 'abc',
say: function () {
}
}
console.log(o.name);
delete o.name;
console.log(o.name);

js入门之对象的更多相关文章

  1. JS入门之ActiveXObject对象(转载)

    JS入门之ActiveXObject对象   此对象提供自动化对象的接口.   function ActiveXObject(ProgID : String [, location : String] ...

  2. js入门之内置对象Math

    一. 复习数据类型 简单数据类型, 基本数据类型/值类型 Number String Boolean Null Undefined 复杂数据类型 引用类型 Object 数组 数据在内存中是如何存储的 ...

  3. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  4. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

  5. React Native 系列(一) -- JS入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  6. 以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明

    以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...

  7. Angular.js 入门(一)

    最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...

  8. d3.js 入门指南

    说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

  9. 极简 Node.js 入门 - Node.js 是什么、性能有优势?

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

随机推荐

  1. android studio 把 ionic 打包时修改应用名称、修改应用图标、修改启动画面,升级打包

    在项目中resources中替换成自己的图标和启动画面即可 在config.xml 修改包名 打正式包和升级打包同原生的类似,在Androidmanifest.xml修改版本号和版本名

  2. python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图

    python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图 # coding=utf-8 from openpyxl import load_workbook ...

  3. dtypes.py", line 499 _np_qint8 = np.dtype([("qint8", np.int8, (1,)])

    Traceback (most recent call last): File "<stdin>", line 1, in <module> File &q ...

  4. 设置pycharm文件默认换行符onfiguring Line Separators

    http://www.jetbrains.com/help/pycharm/2016.2/configuring-line-separators.html PyCharm makes it possi ...

  5. RabbitMQ 入门教程(PHP版) 第六部分:远程调用(RPC)

    在云计算环境中,很多时候需要用它其他机器的计算资源,把一部分计算任务分配到其他节点来完成.RabbitMQ 如何使用 RPC 呢?下面将会通过其它节点完成斐波纳契示例. 流程图  当客户端启动时,它 ...

  6. Hello log4net——做一个实用好用的log4net的demo(转)

    log4net使用指南  (对配置解释比较全面细致,建议做完demo后多看) Log4Net使用详解(周公)——点击打开链接 Log4Net使用详解(续)周公——点击打开链接 点击打开链接 点击打开链 ...

  7. 时空卷积网络TCN

    1.写在前面 实验表明,RNN 在几乎所有的序列问题上都有良好表现,包括语音/文本识别.机器翻译.手写体识别.序列数据分析(预测)等. 在实际应用中,RNN 在内部设计上存在一个严重的问题:由于网络一 ...

  8. 为做个程序员英语字典,我处理了StackOverflow和HackerNews10年5千万条数据

    有点标题党,不过都说都真实的.英语技能对开发员人员至关重要.所有人都不喜欢背单词,但更惨的是背住的单词发现没怎么用,又慢慢地忘记了.本来计划给自己做个开发人员常用单词表,感觉可能对其它人也有用,所以就 ...

  9. PS更换证件照背景颜色

    同学们大家好,我是阿宝老师,今天给大家讲一下如何使用PS更换证件照背景色. 目前使用PS更换证件照底片有三种方式,这三种方式虽有不同,但是最终目的都是将人像从背景中抠出来.扣取人像有三种方法可供选取, ...

  10. HTTP权威指南-报文与状态码

    所有的报文都向下流动 报文流向 报文组成 HTTP方法 状态码 GET示例 HEAD示例 100~199 信息性状态码 200~299 成功状态码 300~399重定向状态码 400~499 客户端错 ...