js入门之对象
一、对象理解
现实世界 万物皆对象, 一切事物都是对象 对象还是一个具体的事物 对象: 特征和行为组成 特征是名词 用来描述对象的, 行为是动词 程序中的对象
是对现实世界中事物的抽象
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入门之对象的更多相关文章
- JS入门之ActiveXObject对象(转载)
JS入门之ActiveXObject对象 此对象提供自动化对象的接口. function ActiveXObject(ProgID : String [, location : String] ...
- js入门之内置对象Math
一. 复习数据类型 简单数据类型, 基本数据类型/值类型 Number String Boolean Null Undefined 复杂数据类型 引用类型 Object 数组 数据在内存中是如何存储的 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- React Native 系列(一) -- JS入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- 以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明
以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...
- Angular.js 入门(一)
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...
- d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
- 极简 Node.js 入门 - Node.js 是什么、性能有优势?
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
随机推荐
- android studio 把 ionic 打包时修改应用名称、修改应用图标、修改启动画面,升级打包
在项目中resources中替换成自己的图标和启动画面即可 在config.xml 修改包名 打正式包和升级打包同原生的类似,在Androidmanifest.xml修改版本号和版本名
- python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图
python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图 # coding=utf-8 from openpyxl import load_workbook ...
- 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 ...
- 设置pycharm文件默认换行符onfiguring Line Separators
http://www.jetbrains.com/help/pycharm/2016.2/configuring-line-separators.html PyCharm makes it possi ...
- RabbitMQ 入门教程(PHP版) 第六部分:远程调用(RPC)
在云计算环境中,很多时候需要用它其他机器的计算资源,把一部分计算任务分配到其他节点来完成.RabbitMQ 如何使用 RPC 呢?下面将会通过其它节点完成斐波纳契示例. 流程图  当客户端启动时,它 ...
- Hello log4net——做一个实用好用的log4net的demo(转)
log4net使用指南 (对配置解释比较全面细致,建议做完demo后多看) Log4Net使用详解(周公)——点击打开链接 Log4Net使用详解(续)周公——点击打开链接 点击打开链接 点击打开链 ...
- 时空卷积网络TCN
1.写在前面 实验表明,RNN 在几乎所有的序列问题上都有良好表现,包括语音/文本识别.机器翻译.手写体识别.序列数据分析(预测)等. 在实际应用中,RNN 在内部设计上存在一个严重的问题:由于网络一 ...
- 为做个程序员英语字典,我处理了StackOverflow和HackerNews10年5千万条数据
有点标题党,不过都说都真实的.英语技能对开发员人员至关重要.所有人都不喜欢背单词,但更惨的是背住的单词发现没怎么用,又慢慢地忘记了.本来计划给自己做个开发人员常用单词表,感觉可能对其它人也有用,所以就 ...
- PS更换证件照背景颜色
同学们大家好,我是阿宝老师,今天给大家讲一下如何使用PS更换证件照背景色. 目前使用PS更换证件照底片有三种方式,这三种方式虽有不同,但是最终目的都是将人像从背景中抠出来.扣取人像有三种方法可供选取, ...
- HTTP权威指南-报文与状态码
所有的报文都向下流动 报文流向 报文组成 HTTP方法 状态码 GET示例 HEAD示例 100~199 信息性状态码 200~299 成功状态码 300~399重定向状态码 400~499 客户端错 ...