一、对象理解

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

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

程序中的对象
是对现实世界中事物的抽象
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. flutter 运行别人项目 包无法导入报错:Target of URI doesn't exist 'package:flutter/material.dart' 解决方法

    命令行里运行  flutter packages get

  2. 001-guava概述

    一.概述 Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库,例如:集合 [collections] .缓存 [caching] .原生类型支持 [primitives supp ...

  3. 004-行为型-02-模板方法模式(Template Method)

    一.概述 定义了一个算法的骨架,并允许子类为一个或多个步骤提供实现.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法的某些步骤 1.1.适用场景 一次性实现一个算法的不变的部分,并将可变的行 ...

  4. hadoop记录-[Flink]Flink三种运行模式安装部署以及实现WordCount(转载)

    [Flink]Flink三种运行模式安装部署以及实现WordCount 前言 Flink三种运行方式:Local.Standalone.On Yarn.成功部署后分别用Scala和Java实现word ...

  5. Python - Django - ORM 多对多表结构的三种方式

    多对多的三种方式: ORM 自动创建第三张表 自己创建第三张表, 利用外键分别关联作者和书,关联查询比较麻烦,因为没办法使用 ORM 提供的便利方法 自己创建第三张表,使用 ORM 的 ManyToM ...

  6. mysql的驱动类com.mysql.jdbc.Driver过时了,需要用com.mysql.cj.jdbc.Driver代替

    springboot项目整合mybatis,配置文件如下: server: port: 8081 mybatis: config-location: classpath:mybatis/mybatis ...

  7. 【Leetcode_easy】860. Lemonade Change

    problem 860. Lemonade Change solution class Solution { public: bool lemonadeChange(vector<int> ...

  8. tcpreplay使用介绍

    安装 brew install tcpreplay yum install tcpreplay tcpreplay 回放 tcpreplay is a tool for replaying netwo ...

  9. CF1237D Balanced Playlist

    思路:假设从第i首歌开始听,结束位置为j,那么从第i+1首歌开始听,结束位置一定不早于j.可以用反证法证明.想到这一点,就不难解决了. 实现: #include <bits/stdc++.h&g ...

  10. C++ 宏和模板简介

    参考<21天学通C++>第14章节,对C++中的宏和模板进行了学习,总结起来其主要内容如下: (1) 预处理器简介 (2) 关键字#define与宏 (3) 模板简介 (4) 如何编写函数 ...