重学前端之（5）面向对象、new的执行原理

对象

对象的基本概念

什么是对象??

现实生活中 : 万物皆对象, 对象是一个具体的事物 , 一个具体的事物就会有 特征 和 行为 ;

JavaScript中: js中的对象就是生活中对象的一个抽象,,,, 没有特征和行为,,取而代之的是有对应的属性和方法 ;

思考 :

1. 学生对象: 
   // 特征 : 名字,性别,身高,体重
   // 行为 : 吃饭、睡觉、敲代码
2.  js的对象 属性+方法
3. 对象初体验
var stu = {
      // 键 值 对
    // 属性名 : 属性值
    // 属性名 : 变量 => 不是字符型
    // 属性值 : 任意类型
    name : 'zs',
    gender: '男'
    height:170;
    weight:170;
    eat:function(){
      console.log('吃饭');
    }
}
复制代码

• 对象 : 是一组无序的键值对的集合

• 特色 :

  1. 声明的变量 = {}  []=> 数组
  2. 键值对出现
  3. 逗号隔开,, 记住 : 之后再 {} 内一行一行的都是用 , 隔开
  复制代码

  ​

为何要学习对象?

思考1：若是要存储一我的的信息，应该怎么办？
var name = "张三";
var age = 18;
var sex = "男";
var hobby = "上网";
思考2：这么作的缺点是什么？
这些变量都是属于一我的的，应该跟数组同样，使用一个集合把全部的信息都存储起来。
复制代码

数组：是有序的元素集合 ，数组用于存放一组有序的数据，好比一个班级全部人的名字，一个班级全部人的成绩。

对象：是一组无序的键值对的集合。 对象用于存放一组无序的数据，好比一我的的特征和行为。

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

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

单纯的建立一个对象

###对象字面量

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

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

注意 :

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

经过Object构造函数建立

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

设置对象的属性

// 语法 对象名.属性 = 值
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
obj.gender = '男';

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

// 补???
若是存在过的属性呢???
    
// 设置对象的属性的语法
    // 对象.属性 = 值
    // 1. 若是对象有这个属性，修改这个属性
    // 2. 若是对象没有这个属性，添加这个属性
复制代码

获取对象的属性

// 语法 对象名.属性
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);

//若是是方法，能够调用
obj.sayHi();


// 获取对象属性的语法：
// 对象.属性：对象的属性
// 1. 若是有这个属性，直接返回属性值
// 2. 若是没有这个属性，返回undefined
复制代码

删除对象属性

delete关键字能够删除对象的属性

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

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

批量建立对象

在实际开发中，常常须要建立多个相同类型的对象，好比班级的学生等。

使用工厂函数建立对象

//定义一个函数，用于建立学生对象
  //工厂函数：
  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类型的

查看一个对象的类型

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

关于typeof

• typeof用于查看基本的数据类型， number string boolean undefined

• typeof若是查看复杂数据类型，返回的都是object类型。

• typeof null比较特殊，结果是object

• typeof 函数的结果是function:由于函数是一等公民

  复制代码

// 简单类型

var num1 = 12;

var num2 = 'abc';

var num3 = true;

var num4 = undefined;

var num5 = null;   //(object类型) 
复制代码

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

function num6() {

}

var num7 = [];

var num8 = {};

**方式2 : instanceof 判断**

```js
结构 : 对象 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

// 原型的构造函数 
console.log(arr.constructor.name); //Array
console.log(obj1.constructor.name); //Object
console.log(fn.constructor.name); //Function
复制代码

// 方式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运算符一块儿使用在建立对象的语句中。

//全部建立出来的对象都有：
    //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. 构造函数的做用是用于实例化一个对象，即给对象添加属性和方法。

在构造函数内部，this指的是一个新生成的空对象，全部针对this的操做，都会发生在这个空对象上。构造函数之因此叫“构造函数”，就是说这个函数的目的，就是操做一个空对象（即this对象），将其“构造”为须要的样子。 若是构造函数内部有return语句，并且return后面跟着一个对象，new命令会返回return语句指定的对象；不然，就会无论return语句，返回this对象

new在执行时的原理 。

/** *建立一个空对象，做为将要返回的对象实例 *将这个空对象的原型，指向构造函数的prototype属性 *将这个空对象赋值给函数内部的this关键字 *开始执行构造函数内部的代码 */
//代码 演示new的过程
function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ param1) {
  // 将 arguments 对象转为数组
  var args = [].slice.call(arguments);
  // 取出构造函数
  var constructor = args.shift();
  // 建立一个空对象，继承构造函数的 prototype 属性
  var context = Object.create(constructor.prototype);
  // 执行构造函数
  var result = constructor.apply(context, args);
  // 若是返回结果是对象，就直接返回，不然返回 context 对象
  return (typeof result === 'object' && result != null) ? result : context;
}
 
复制代码

构造函数的做用(实例化对象)： 给建立出来的对象增长属性和方法。

---

操做对象的属性

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

// 获取对象属性的语法：
	// 对象.属性：对象的属性
    // 1. 若是有这个属性，直接返回属性值
    // 2. 若是没有这个属性，返回undefined

// 设置对象的属性的语法
    // 对象.属性 = 值
    // 1. 若是对象有这个属性，修改这个属性
    // 2. 若是对象没有这个属性，添加这个属性

var obj = {
    name : 'zs'
} 

console.log ( obj.name ) //ok
console.log ( obj.'name' ) // X
obj.name = 'why'; //ok

var key = 'name';

console.log ( obj.key ) // X

复制代码

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

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

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

应用场景 : 遍历对象

遍历对象

经过for..in语法能够遍历一个对象

for (var key in obj) {
    // 键
    console.log(key);
    // 值
    console.log(obj[key]);
}
复制代码

解析
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  对象) { .. }
  复制代码

• 代码

var obj = {
	name: 'zs'
}
if ('name' in obj) {
	console.log('是');
}
复制代码

获取对象里的全部属性

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

值类型与引用类型

JS数据类型

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

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

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

• 变量在存储简单类型的时候，存的是值自己（值类型）
• 变量在存储复杂数据类型的时候，存的是引用，也叫地址（类型）

值类型的存储

变量存储数据的时候，存储的直接就是这个值自己。

demo :
var num = 11;
var num1 = num;
num = 20;
console.log(num);
console.log(num1);
复制代码

简单类型进行赋值的时候，赋值的是值自己。

引用类型的存储

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

demo:
var obj = {
  name:"zs",
  age:18
}

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

////把obj存的地址给了obj1 因此obj和obj1都存放了这个对象的地址，
复制代码

结论：简单类型存储的是值自己，复杂类型存储的是地址，引入若是把第一个对象赋值给另外一个变量，此时两个变量会指向同一个对象。