JavaScript-----12.对象
1. 对象
万物皆对象,但是对象必须是一个具体的事物。例如:“明星”不是对象,“周星驰”是对象;“苹果”不是对象“这个苹果”是对象。Js中,对象是一组无序的相关属性和方法的集合。
对象是由属性和方法组成的
- 属性:事物的特性,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
2.创建对象的三种方法
- 利用字面量来创建对象
- 利用new Object创建对象
- 利用构造函数来创建对象
2.1 利用字面量来创建对象
对象字面量:就是{},里面包含了表达这个具体事物的属性和方法。
回忆:()是运算符,优先级最高;[]是数组字面量,用于创建数组;{}是对象字面量,用于创建对象。
//1.利用字面量创建对象
//var obj={};//创建了一个空的对象
var obj = {
uname: 'Lili',
age: 18,
sex: 'male',
sayHi: function() { //匿名函数充当方法
console.log('hi~');
}
}
//注意点
//(1)对象里的属性或者方法采用的是键值对的形式 键(属性名):值(属性值)
//(2)多个属性或者方法之间用逗号隔开
//(3)方法冒号后面跟的是一个匿名函数
//2.使用对象
//(1)调用对象的属性采取的是 对象名.属性名
console.log(obj.uname);
//(2)调用对象属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//(3)调用对象的方法采取的是 对象名.方法名() 千万别忘记添加小括号
obj.sayHi(); //hi~
变量、属性、函数、方法总结:
//1.变量和属性的相同点:都是用来存储数据的
var num = 10;
var obj = {
age: 10
}
//不同点:
//变量 单独声明并赋值 使用的时候直接写变量名 单独存在
console.log(num);
//属性 在对象里面不需要声明使用的时候必须是对象.属性
console.log(obj.age);
//2.函数和方法的相同点:都是实现某种功能 做某件事
function fn() {
}
var obj = {
fn: function() {
}
}
//不同点
//函数的单独声明并且调用的 函数名() 单独存在
fn();
//在对象里面 调用的时候是 对象.方法()
obj.fn();
2.2 利用new Object创建对象
//1. 利用new Object创建对象
var obj = new Object(); //创建了一个空的对象
//在空对象里追加属性和方法
obj.uname = 'Lili';
obj.age = 18;
obj.sex = 'male';
obj.satHi = function() {
console.log('hi');
}
//(1)利用等号赋值的方法来添加对象的属性和方法
//(2)每个属性和方法直接用分号结束
//2. 调用属性的两种方式
console.log(obj.uanme);
console.log(obj['sex']);
//调用方法
obj.sayHi();
2.3 利用构造函数来创建对象
为什么需要用到构造函数来创建对象?因为前面提到的两种创建对象的方法,一次仅仅可用创建一个对象。有时候创建很多个对象的时候,里面很多的属性和方法大量是相同的,因此考虑运用函数的方法来重复这些相同的代码。我们就把这个函数称为构造函数。换句话说:构造函数就是对象里面一些相同的属性和方法抽象出来封装到函数里。
//语法格式
//1.利用构造函数创建对象
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {
}
}
//2.调用
new 构造函数名();
举例
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男');
console.log(typeof ldh); //object
console.log(ldh.name); //刘德华
console.log(ldh['sex']); //男
ldh.sing('冰雨');//冰雨
//(1)构造函数名首字母要大写
//(2)构造函数不需要return就可用返回结果
//(3)构造函数返回的是一个对象,利用typeof可用检测出来
//(4)构造函数与普通函数的不同之处在于:调用的时候前面多加了一个new;函数体里面属性和方法前面必须加上this;构造函数名首字母必须要大写
构造函数和对象的区别:
- 构造函数泛指一大类,相当于java语言里面的类;对象是一个特指
- 利用构造函数创建对象的过程又称未类的实例化
3. new关键字
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男');
//new 关键字执行过程
//1. new构造函数new Star可用在内存中创建了一个空对象
//2. this就会指向刚才创建的空对象
//3. 执行构造函数里面的代码 给这个空对象添加属性和方法
//4. 返回这个对象(所以构造函数里不需要return)
4. 遍历对象属性
for...in用于对数组或者对象的属性进行循环操作
var obj = {
name: 'pink老师',
age: 18,
sex: '男',
fn: function() {}
}
for (var k in obj) {
console.log(k); //k变量输出 得到的是属性名
console.log(obj[k]); //obj[k]得到的是属性值
}
JavaScript-----12.对象的更多相关文章
- 12 JavaScript String对象 & Date对象
<script> var a = "string"; var b = new String("string"); var c = new Strin ...
- javascript 全局对象--w3school
JavaScript全局对象 1. decodeURI()解析某个编码的URI. 2.decodeURInComponent()解析一个编码的URI组件. 3.encodeURI()把字符串编码为U ...
- JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString
JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...
- 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展
在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...
- javascript数组对象排序
javascript数组对象排序 JavaScript数组内置排序函数 javascript内置的sort函数是多种排序算法的集合 JavaScript实现多维数组.对象数组排序,其实用的就是原生的s ...
- JavaScript Date对象 日期获取函数
JavaScript Date对象使用小例子: 运行结果: 总结: 1.尽管我们认为12月是第12个月份,但是JavaScript从0开始计算月份,所以月份11表示12月: 2.nowDate.set ...
- JavaScript日期对象使用总结
javascript Date日期对象的创建 创建一个日期对象: var objDate=new Date([arguments list]); 我总结了参数形式主要有以下3种: new Date(& ...
- JavaScript Date对象介绍
原文:JavaScript Date对象介绍 Date 日期和时间对象 1. 介绍 Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 2. 构造函数 2.1 new ...
- JavaScript原生对象拓展
JavaScript原生对象拓展 在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏 ...
- JavaScript判断对象的类型
JavaScript判断对象的类型 最近阅读了一些关于JavaScript判断对象类型的文章.总结下来,主要有constructor属性.typeof操作符.instanceof操作符和Object. ...
随机推荐
- 【JS】370- 总结异步编程的六种方式
点击上方"前端自习课"关注,学习起来~ 作者:Aima https://segmentfault.com/a/1190000019188824 众所周知 JavaScript 是 ...
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- 小胖求学系列之-文档生成利器(上)-smart-doc
最近小胖上课总是挂着黑眼圈,同桌小张问:你昨晚通宵啦?小胖有气无力的说到:最近开发的项目接口文档没写,昨晚补文档补了很久,哎,昨晚只睡了2个小时.小张说:不是有生成文档工具吗,类似swagger2.s ...
- 【JPA】字段访问、属性访问及混合访问
[JPA]字段访问.属性访问及混合访问 转载:https://www.cnblogs.com/yangchongxing/p/10120318.html 1.字段访问 注解字段,通过反射来获得和设置字 ...
- AJAX 多次调用,后面的会覆盖前面的内容/数据
1.有的时候,同一个请求链接,需要传递不同的参数,发起多个请求.因此我采用了for循环. 1.1 此处是需要传递的参数 function behavioranalysisReqstue(type) { ...
- 简单学习【1】——使用webpack
使用webpack webpack命令 webpack配置 第三方脚手架 1.webpack命令 webpack - h (webpack 所有的选项) webpack -v (查看webpack的版 ...
- Django forms组件里的ChoiceField、ModelChoiceField和ModelMutipleChoiceField的区别
阅读简要 首先我们要明白Django forms组件里的ChoiceField.ModelChoiceField和ModelMutipleChoiceField是继承关系 ChoiceField 1. ...
- python子类如何继承父类的实例变量?
类型1:父类和子类的实例变量均不需要传递 class A(object): def __init__(self): self.name = "cui" def get_name(s ...
- HtEditor使用总结
最近在公司学习到ht编辑器的使用,关于使用方法上总结了一下,避免入坑.ht是做大屏数据可视化比较好的一款软件,不过多介绍,官网上有具体使用方法和展示样例,这里我整理一下我用的最多的功能. ##1.如何 ...
- PromiseKit基本使用及源码解析
Promise处理一系列异步操作的应用框架,能够保证顺序执行一系列异步操作,当出错时可以通过catch捕获错误进行处理.Promise框架也是很好的诠释了swift的面相协议编程以及函数式编程 两种类 ...