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. ...
随机推荐
- WSL(Windows Subsystem for Linux) Ubuntu 下byobu状态栏错误的问题
关于WSL的,Win10 的Linux子系统如何安装,就不赘述了,Win10商店里就有,至于win7和win8.1想装这个估计也不行,所以跳过. 最近处于好奇,也懒得弄VMware的虚拟机(那玩意儿占 ...
- isensor app kit 之 CF5642V2 OV5642 测试总结
. 总结; 使用官哥的cf5642c-v2时,需要将isensor app kit 上的iic上拉电阻去掉,否则可能导致寄存器初始化不成功,去掉即可,使用柴草电子的模组则不需要.
- NAT(地址解析协议)
第七部分,也是本次更新的最后一部分,NAT(Network Address Translation),即地址解析协议.通俗理解,地址解析协议就是当一个单位只拥有一个公网ip地址,当内网中的主机想要访问 ...
- VS Code 成主宰、Vue 备受热捧!2019 前端开发趋势必读
前端在生产和开发中占据着越来越重要的地位,PC 端.手机端.桌面端.智能手表端等等设备都离不开前端的身影.本文将围绕框架.编程语言.工具.React.Vue 等方面,全面回顾 2019 年前端与 We ...
- NodeJS3-1基础API----Path(路径)
path 和路径有关的操作 Path(路径) path 模块提供用于处理文件路径和目录路径的实用工具. 它可以使用以下方式访问 const path = require('path'); 1. p ...
- 《Java知识应用》Java加密方式(Base64)详解
1. 说明 Base64加密方式:比较简单,加密快,对普通大众可以起到加密的作用.在程序员眼中和透明一样. Base64应用场景:图片转码(应用于邮件,img标签,http加密) 2. 案例 impo ...
- Caffe源码-SGDSolver类
SGDSolver类简介 Solver类用于网络参数的更新,而SGDSolver类实现了优化方法中的随机梯度下降法(stochastic gradient descent),此外还具备缩放.正则化梯度 ...
- JS---DOM---为同一个元素绑定多个不同事件指向同一个事件处理函数
为同一个元素绑定多个不同事件指向同一个事件处理函数 1. 用了switch(e.type){} 来修改 2. break <input type="button" value ...
- ORA-07217 environment variable cannot be evaluated
问题描述:还是rman的问题,一个很沙雕的问题,改了半天,准备是要做数据库的全备,和归档的备份 1.连接rman进行备份,这里要保持数据库为mount状态,因为要对数据库全备 [oracle@orcl ...
- CSS字体属性 font属性
CSS的所有字体属性: ·-· font 在一个声明中设置所有的字体属性 ·-· font-family 指定文本的字体系列 ·-· font-size 指定文本的字体大小 (属性值是整数字, ...