前端学习js基础第五天---对象的认识

简单数据类型:number string Boolean null undefined

复杂数据类型:数组 函数  对象

我们现在学习了前面的所有,就差最后的一个对象了,今天我们就学习一下对象

 

一.对象的基本知识

1.生活中的对象

可以通过特征和行为描述出来的

2.js中的对象

概念:无序的键值对的几个

作用:存储数据,存储一个对象的属性和方法

3.创建对象的两种方式

1.字面量的方式  var obj ={}

2.构造函数的方式 var obj = new Object()

4.如何操作对象 - 取值和改值

取值:对象名.属性名  obj.name

        1.如果有这个属性,直接返回值

        2.如果没有这个属性,返回undefined

        3,如果取得的是函数,可以直接调用  ,一般对象中的函数也叫方法

改值:对象名:属性名 = 值    obj.name = 'zs'

       1.如果属性名存在,直接改

       2.如果属性名不存在,添加一个新的属性,并赋值

二.批量创建对象的两种方式

1.工厂函数的方式

就是将创建对象的过程进行了封装

function  createObject( name, age ) {
	var obj = { };
        obj.name = name;
	obj.age = age;
	return obj;

}

2.构造函数的方式

一个结合着new进行创建对象的函数

特征:首字母大写,必须结合着new进行使用

作用:实例化对象,就是给对象添加属性和方法

function  Teacher( name, age ) {
	this.name = name;
	this.age = age;
}
var  teacher = new Teacher( '鹏鹏',  20 );

new做的四件事:

1.创建一个新的对象,内存会开辟一部分空间

2.将this指向新对象

3.执行构造函数,就是在给对象添加属性和方法

4.返回这个对象

3.对比工厂函数的缺点

(1) 需要自己创建对象

(2) 需要自己返回对象

(3)工厂函数创建出来的对象都是Object类型的,而构造函数创建出来的对象室友自己的类型的

4.this的指向

(1) 如果是普通的函数,调用时,this默认指向window 

(2) 如果是构造函数中的this,就在指向新对象

(3)如果是对象中的函数方法中的this ,  方法里卖弄的this指向当前对象

三.判断数据类型

1.typeof 

(1)只能判断简单数据类型 number string boolean undefined

(2)对于复杂数据类型返回object

特例:函数 typeof 函数    返回  function

          null ,typeof null    返回 object

2.如何判断对象的类型

1.instanceof 使用的少
   arr  instanceof  Array
        true 就是Array类型
        false 不是 Array 类型
2.constructor.name 用的多
    arr.constructor.name    返回 Array
    obj.constructor.name    返回  obj
    p.constructor.name    返回Person

四.操作对象

1.操作对象的两种类型

点语法: obj.key  不管变量,直接访问对象中的相应属性

中括号语法 : obj['name']  访问对象的name属性

                    var key = 'name'; obj[key] ,也是访问对象的name属性

2.遍历一个对象

for(var key in obj){...}

3.in操作符

和for组合使用可以遍历对象

单独使用,判断是否包含某个属性   ,"name" in obj  包含返回true  不包含返回  false

4.删除对象的属性(了解)

delete 对象名.属性名

五.值类型和引用类型

1.值类型

又叫简单数据类型,遍历存储简单数据类型,存储的是值本身

2.引用类型

又叫复杂数据类型,变量存储复杂数据类型,存储的是地址

3.赋值特征

值类型赋值,赋值的就是值本身

引用类型赋值,赋值的就是地址

4.值传递

值类型,传递的就是值本身

引用类型,传递的就是地址

 

 

下面我们看几道相关的练习题

认真思考

//面试题1 : 
  // function fn(a, b) {
  //   a = a + 1;
  //   b = b + 1;
  //   console.log(a);  //11
  //   console.log(b);  // 21
  // }

  // var x = 10;
  // var y = 20;
  // fn(x, y);
  // console.log(x);  // 10
  // console.log(y);  // 20


  // 面试题2 : 
  // var p = {
  //   name:"zs",
  //   age:18
  // }
  // function fn(person) {
  //   person.name = 'ls';
  //   console.log(person.name); //ls
  // }
  // fn(p);
  // console.log(p.name);  //ls
  // // 引用类型传递的是地址, 两个变量指向的是同一个对象


  //面试题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); //ls 
  // }
  // var p = new Person("zs", 18, 1000);//创建一个新对象
  // console.log(p.name); // zs
  // f1(p);
  // console.log(p.name); // ls


  //面试题4
  function Person(name, age, salary) {
    this.name = name;
    this.age = age;
    this.salary = salary;
  }
  function f1(person) {
    person.name = "ls";
    person = {
      name : 'zs'
    }
    console.log(person.name);  // zs
  }
  var p = new Person("zs", 18, 1000);
  console.log(p.name); //zs
  f1(p);
  console.log(p.name); // ls