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 ...
随机推荐
- flutter 运行别人项目 包无法导入报错:Target of URI doesn't exist 'package:flutter/material.dart' 解决方法
命令行里运行 flutter packages get
- 001-guava概述
一.概述 Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库,例如:集合 [collections] .缓存 [caching] .原生类型支持 [primitives supp ...
- 004-行为型-02-模板方法模式(Template Method)
一.概述 定义了一个算法的骨架,并允许子类为一个或多个步骤提供实现.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法的某些步骤 1.1.适用场景 一次性实现一个算法的不变的部分,并将可变的行 ...
- hadoop记录-[Flink]Flink三种运行模式安装部署以及实现WordCount(转载)
[Flink]Flink三种运行模式安装部署以及实现WordCount 前言 Flink三种运行方式:Local.Standalone.On Yarn.成功部署后分别用Scala和Java实现word ...
- Python - Django - ORM 多对多表结构的三种方式
多对多的三种方式: ORM 自动创建第三张表 自己创建第三张表, 利用外键分别关联作者和书,关联查询比较麻烦,因为没办法使用 ORM 提供的便利方法 自己创建第三张表,使用 ORM 的 ManyToM ...
- mysql的驱动类com.mysql.jdbc.Driver过时了,需要用com.mysql.cj.jdbc.Driver代替
springboot项目整合mybatis,配置文件如下: server: port: 8081 mybatis: config-location: classpath:mybatis/mybatis ...
- 【Leetcode_easy】860. Lemonade Change
problem 860. Lemonade Change solution class Solution { public: bool lemonadeChange(vector<int> ...
- tcpreplay使用介绍
安装 brew install tcpreplay yum install tcpreplay tcpreplay 回放 tcpreplay is a tool for replaying netwo ...
- CF1237D Balanced Playlist
思路:假设从第i首歌开始听,结束位置为j,那么从第i+1首歌开始听,结束位置一定不早于j.可以用反证法证明.想到这一点,就不难解决了. 实现: #include <bits/stdc++.h&g ...
- C++ 宏和模板简介
参考<21天学通C++>第14章节,对C++中的宏和模板进行了学习,总结起来其主要内容如下: (1) 预处理器简介 (2) 关键字#define与宏 (3) 模板简介 (4) 如何编写函数 ...