前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript第六节

JavaScript第六节

作者头像
用户3461357
发布2019-08-02 15:20:26
4380
发布2019-08-02 15:20:26
举报
文章被收录于专栏:web前端基地web前端基地

对象

对象的基本概念

什么是对象??

现实生活中 : 万物皆对象, 对象是一个具体的事物 , 一个具体的事物就会有 特征 和 行为 ; JavaScript中: js中的对象就是生活中对象的一个抽象,,,, 没有特征和行为,,取而代之的是有对应的属性和方法 ;

思考 :

代码语言:javascript
复制
1. 学生对象: 
   // 特征 : 名字,性别,身高,体重
   // 行为 : 吃饭、睡觉、敲代码
2.  js的对象 属性+方法
3. 对象初体验
var stu = {
      // 键  值 对
    // 属性名 : 属性值
    // 属性名 : 变量 => 不是字符型
    // 属性值 : 任意类型
    name : 'zs',
    gender: '男'
    height:170;
    weight:170;
    eat:function(){
      console.log('吃饭');
    }
}
  • 对象 : 是一组无序的键值对的集合
  • 特点 : 1. 声明的变量 = {} []=> 数组 2. 键值对出现 3. 逗号隔开,, 记住 : 以后再 {} 内一行一行的都是用 , 隔开

为什么要学习对象?

代码语言:javascript
复制
思考1:如果要存储一个人的信息,应该怎么办?
var name = "张三";
var age = 18;
var sex = "男";
var hobby = "上网";
思考2:这么做的缺点是什么?
这些变量都是属于一个人的,应该跟数组一样,使用一个集合把所有的信息都存储起来。

数组:是有序的元素集合 ,数组用于存放一组有序的数据,比如一个班级所有人的名字,一个班级所有人的成绩。

对象:是一组无序的键值对的集合。 对象用于存放一组无序的数据,比如一个人的特征和行为。

代码语言:javascript
复制
//数组多个元素之间使用,隔开
//对象中多个键值对之间也用,隔开,,,键值对的格式:键:值
var obj = {
  name:"张三",
  age:18,
  sex:"男",
  hobby:"上网"
}

对象的场景 : 京东

创建对象-1 (2种方式 单创)

单纯的创建一个对象

###对象字面量

字面量 : 直接量,,,通过看数值,,直接看出来类型的 ,或者不需要通过创建, 11, '234', true , [] , {}

代码语言:javascript
复制
var p = {};
var p = {
    name : 'zs',
    age:18,
    sayHi:function(){
        console.log(this.name)
    }
}

注意 :

this使用在对象的属性的函数里,,其实地方使用没有意义

通过Object构造函数创建

代码语言:javascript
复制
var p =  new Object(); // 创建一个空的对象
var p =  new Object({name :'xx'});

设置对象的属性

代码语言:javascript
复制
// 语法  对象名.属性 = 值
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
obj.gender = '男';

// 添加方法
obj.sayHi = function () {
    console.log('大家好,我是' + obj.name);
}

// 补???
如果存在过的属性呢???
    
// 设置对象的属性的语法
    // 对象.属性 = 值
    // 1. 如果对象有这个属性,修改这个属性
    // 2. 如果对象没有这个属性,添加这个属性

获取对象的属性

代码语言:javascript
复制
// 语法  对象名.属性
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);

//如果是方法,可以调用
obj.sayHi();


// 获取对象属性的语法:
// 对象.属性:对象的属性
// 1. 如果有这个属性,直接返回属性值
// 2. 如果没有这个属性,返回undefined

删除对象属性

delete关键字可以删除对象的属性

代码语言:javascript
复制
var obj = {name:"zs", age:18}
delete obj.name;//删除obj的name属性

##创建对象-2 (2种方式 批量)

批量创建对象 在实际开发中,经常需要创建多个相同类型的对象,比如游戏中的怪物,班级的学生等。

使用工厂函数创建对象

代码语言:javascript
复制
  //定义一个函数,用于创建学生对象
  //工厂函数:
  function createStudent(name, age, sex) {
    var stu = {};
    stu.name = name;
    stu.age = age;
    stu.sex = sex;
    stu.sayHi = function() {
      console.log("大家好,我是"+this.name);
    }
    return stu;
  }

  var stu1 = createStudent("zs", 18, "男");
  stu1.sayHi();

优点:可以同时创建多个对象

缺点:创建出来的没有具体的类型,都是object类型的

查看一个对象的类型

代码语言:javascript
复制
typeof 只能判断基本数据类型的类型
instanceof 判断对象的具体类型
constructor.name 也可以获取到对象的具体类型

关于typeof

  • typeof用于查看基本的数据类型, number string boolean undefined
  • typeof如果查看复杂数据类型,返回的都是object类型。
  • typeof null比较特殊,结果是object
  • typeof 函数的结果是function:因为函数是一等公民
代码语言:javascript
复制
// 简单类型

 var num1 = 12;

 var num2 = 'abc';

 var num3 = true;

 var num4 = undefined;

 var num5 = null;   //(object类型)

// 复杂类型 (引用类型)

function num6() {

}

var num7  =  [];

var num8 = {};

方式2 : instanceof 判断

代码语言:javascript
复制
结构 : 对象 instanceof 构造函数
var arr = [];
var obj = {}
var fn = function () {}
console.log( arr instanceof Array); // true
console.log( obj1 instanceof Object);// true
console.log( fn instanceof Function);// true

方式3 : constructor.name

代码语言:javascript
复制
// 原型的构造函数
console.log(arr.constructor.name); //Array
console.log(obj1.constructor.name); //Object
console.log(fn.constructor.name); //Function
代码语言:javascript
复制
  // 方式1 : typeof
  console.log(typeof num1);
  console.log(typeof num2);
  console.log(typeof num3);
  console.log(typeof num4);
  console.log(typeof num5);
  console.log(typeof num6);
  console.log(typeof num7);
  console.log(typeof num8);


  // typeof 总结 :
  //1. 简单基本类型 : number string boolean undefined
  //2.                null => object
  //3. 复杂类型    : object
  //4.                 函数 => fuction 一等公民

自定义构造函数

工厂函数的缺点 就是无法确定对象的具体类型

构造函数 ,是一种特殊的函数。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。

代码语言:javascript
复制
  //所有创建出来的对象都有:
    //name
    //age
    //hobboy
  function Teacher(name, age) {
    //构造函数内部的this指向的是新创建的那个对象
    this.name = name;
    this.age = age;
  }

  var tea = new Teacher("zs", 18);
  console.log(tea);
  1. 构造函数首字母要大写(推荐做法)。
  2. 构造函数要和new一起使用才有意义。
  3. 构造函数的作用是用于实例化一个对象,即给对象添加属性和方法。

new在执行时会做四件事情

代码语言:javascript
复制
new会做4件事情
//1. new会创建一个新的空对象,类型是Teacher
//2. new 会让this指向这个新的对象
//3. 执行构造函数  目的:给这个新对象加属性和方法
//4. new会返回这个新对象

构造函数的作用(实例化对象): 
  给创建出来的对象增加属性和方法。

练习 : (用四种方式进行练习)

代码语言:javascript
复制
// 1. 学生对象
// name : 张三  age: 18岁 打招呼:大家好我是张三
// name : 李四  age: 19岁 打招呼:大家好我是李四

// 2. 老师对象
// name : 伟哥  爱好:篮球  打: 伟哥正在打篮球
// name : 马哥  爱好:台球  打: 马哥正在打台球

// 3. 英雄对象  (构造函数)
// name : 马哥  学习 : 马哥正在学前端 / 马哥正在学java

总结四种创建对象的方式


操作对象的属性

回顾

.语法 ----- 对象名.属性名 ( 看似变量,不是字符串 )

代码语言:javascript
复制
// 获取对象属性的语法:
// 对象.属性:对象的属性
    // 1. 如果有这个属性,直接返回属性值
    // 2. 如果没有这个属性,返回undefined

// 设置对象的属性的语法
    // 对象.属性 = 值
    // 1. 如果对象有这个属性,修改这个属性
    // 2. 如果对象没有这个属性,添加这个属性

var obj = {
    name : 'zs'
} 

console.log ( obj.name ) //ok
console.log ( obj.'name' ) // X
obj.name = '小马哥'; //ok

var key = 'name';

console.log ( obj.key ) // X

[]语法 ---- 对象名 [ 属性字符串 ] (字符串)

代码语言:javascript
复制
var key = 'name';
console.log ( obj['name'] ) // ok
console.log ( obj[name] ) // X
console.log ( obj[key] ) //ok

二者的区别:当属性名是一个字符串存储在变量中的时候,只能使用关联数组的方式。

应用场景 : 遍历对象

遍历对象

通过for..in语法可以遍历一个对象

代码语言:javascript
复制
for (var key in obj) {
    // 键
    console.log(key);
    // 值
    console.log(obj[key]);
}
代码语言:javascript
复制
解析
var obj = {};
for (var i = 0; i < 10; i++) {
		obj[i] = i * 2;
}
for(var key in obj) {
console.log(key + "==" + obj[key]);
}

###判断一个属性是否是对象的一个属性

  • 结构 : if (属性名 in 对象) { .. }
  • 代码
代码语言:javascript
复制
var obj = {
name: 'zs'
}
if ('name' in obj) {
console.log('是');
}

获取对象里的所有属性

代码语言:javascript
复制
// 结构 :   Object.keys(对象)
Object.keys(obj)

值类型与引用类型

JS数据类型

简单数据类型:number、string、boolean、undefined、null

复杂数据类型:Array、function, Object

简单数据类型也叫值类型,复杂数据类型也叫引用数据类型,这主要是根据内存存储方式来区分的。

  • 变量在存储简单类型的时候,存的是值本身(值类型)
  • 变量在存储复杂数据类型的时候,存的是引用,也叫地址(类型)

值类型的存储

变量存储数据的时候,存储的直接就是这个值本身。

代码语言:javascript
复制
练习 :
var num = 11;
var num1 = num;
num = 20;
console.log(num);
console.log(num1);

简单类型进行赋值的时候,赋值的是值本身。

引用类型的存储

复杂类型: 变量不会存这个对象,对象随机存在内存中,会有一个地址,变量存储的仅仅是这个对象的地址。

代码语言:javascript
复制
练习:
var obj = {
  name:"zs",
  age:18
}

var obj1 = obj;
obj1.name = "ls";
console.log(obj.name);
console.log(obj1.name);

////把obj存的地址给了obj1  所以obj和obj1都存放了这个对象的地址,

练习

代码语言:javascript
复制
// a -> x
function fn(a, b) {
  // 相当于
  //  var a = 10;
  //  var b = 20;
  // 函数的参数 其实就是函数内部的局部变量
  a = a + 1;
  b = b + 1;
  console.log(a);
  console.log(b);
}

var x = 10;
var y = 20;
fn(x, y);
console.log(x);
console.log(y);
代码语言:javascript
复制

//2.
var p = {
  name:"zs",
  age:18
}
function fn(person) {
  person.name = 'ls';
  console.log(person.name);
}
fn(p);
console.log(p.name);

//3.
function Person(name, age, salary) {
   this.name = name;
   this.age = age;
   this.salary = salary;
 }
 function f1(person) {
   person.name = "ls";
   console.log(person.name);
 }
 var p = new Person("zs", 18, 1000);//创建一个新对象
 console.log(p.name);//
 f1(p);
 console.log(p.name);//

结论:简单类型存储的是值本身,复杂类型存储的是地址,引入如果把第一个对象赋值给另一个变量,此时两个变量会指向同一个对象。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端基地 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 对象
    • 对象的基本概念
      • 什么是对象??
      • 为什么要学习对象?
    • 创建对象-1 (2种方式 单创)
      • 通过Object构造函数创建
      • 设置对象的属性
      • 获取对象的属性
      • 删除对象属性
      • 使用工厂函数创建对象
      • 查看一个对象的类型
      • 自定义构造函数
    • 操作对象的属性
      • .语法 ----- 对象名.属性名 ( 看似变量,不是字符串 )
      • []语法 ---- 对象名 [ 属性字符串 ] (字符串)
    • 遍历对象
      • 获取对象里的所有属性
  • 值类型与引用类型
    • JS数据类型
      • 值类型的存储
        • 引用类型的存储
          • 练习
          相关产品与服务
          对象存储
          对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档