JavaScript——面向对象（封装）

一、对象方法中的this

要在方法内调用属性名，需要使用this

i.什么是this？
每个函数自带的，可以自动获得正在调用当前函数的"."前的对象的关键词

ii.何时使用？
只要对象自己的方法内，想使用对象自己的属性，必须加this.属性

var lilei={
  sname:"Li Lei",
  sage:11,
  intr:function(){
    console.log(`I'm ${this.sname}, I'm ${this.sage}`);
  }
}
console.log(lilei.sage);
lilei.intr();
//过了一年，lilei长了一岁
lilei.sage++;
console.log(lilei.sage);//12
lilei.intr();

this自动生成在临时创建的函数作用域对象中，获取的是lilei.intro().前的“lilei”

obj.fun() this->obj
new Fun() this->新创建的对象

二、封装

创建一个对象，集中保存现实中一个事物的属性和功能。

极其便于大量数据的管理维护

今后，只要使用面向对象思想开发时，第一步都是先封装各种各样的对象结构备用。

1.{}

var 对象名={
   属性名: 属性值, 
   ... : ... , 
   方法名: function(){ 
   	 ... 
   }
 }

访问方式：

对象名.属性名
对象名.方法名()

函数 与 方法:

1. 不属于任何对象的，独立的function，称为函数
2. 保存在对象内部的function，称为方法。

2.new

2.1 内置构造函数new

var 对象名=new Object(); //先创建空对象{}

强行给空对象中添加新属性和新方法
对象名.新属性=属性值;
对象名.新方法=function(){ ... this.属性名 ... }

揭示了js语言对底层的核心原理: js中所有对象底层都是关联数组

i. 存储结构: 名值对

ii. 访问成员
①标准写法都是: 对象名/数组名[“成员名”]
②简写都是: 对象名/数组名.成员名
③特殊:
如果成员名是数字时，不能用.只能用[数字]
如果成员名是变量时，只能用[变量]，不要加""

iii. 强行赋值
不会报错，自动添加该属性

iv. 强行访问不存在的位置的值
不会报错，而是返回undefined

 //如何判断一个对象中是否包含某个成员: 
if(对象.成员名!==undefined) //说明包含该成员

v. 用for in循环遍历

 for(var 属性名 in  对象名/数组名){
     //in 会自动依次取出对象或数组中每个:前的属性名，保存到in前的变量中。
     //如果想进一步获得属性值: 
     对象名/数组名[属性名]
  }

2.2 自定义方法克隆clone

步骤：

1. 创建一个空对象等着
2. 遍历原对象中所有属性
3. 每遍历一个属性就为新对象添加同名新属性，属性值与原属性也相同
4. 返回克隆好的新对象

伪代码

function  clone(原对象) {
    var 新对象={}
    for(var 原属性名 in 原对象){
       var 原属性值=原对象[原属性名];
        新对象[原属性名]=原属性值;
    }
    return 新对象;
}

过程图解

①将原对象的地址0x9091传入

②执行var 新对象= {}，会创建一个新的空对象等着，地址0x1234

③逐步遍历原对象的原属性名，并为新对象添加同名新属性，属性值与原属性也相同

重复上述步骤，将第二个属性和属性值放入新对象中

④最后返回新创建的对象

3.构造函数

构造函数：描述同一类型的所有对象的统一结构的函数。

需要反复创建多个相同结构，只是内容不同的对象时，都用构造函数。

优点：代码重用
缺点：浪费内存

3.1 步骤

i. 定义构造函数:

function 类型名(形参1, 形参2, ...){
//将来要加入到新对象中的规定的属性
  this.属性名=形参1;
  this. xxx = xxx; 

this.方法名=function(){ … this.属性名 … }

}

构造函数中不应该包含方法的定义!只包含属性定义！

ii. 如何使用构造函数反复创建多个相同结构的对象

 var 对象名=new 类型名(实参值1, 实参值2, ...)

创建 指定类型的一个新对象，
同时把实参值传给构造函数的形参变量。

new做的4件事:

i. 创建一个新的空对象等待
ii.让新创建的对象自动继承构造函数的原型对象
iii. 调用构造函数:
①将构造函数中的this->new刚创建的新对象
②在构造函数内通过强行赋值方式，为新对象添加规定的属性和方法
iv. 返回新对象的地址，保存到=左边的变量里。

3.2 示例代码与图解

//定义构造函数描述统一结构
function Student(sname,sage) {
    this.sname = sname;
    this.sage = sage;
    this.intr = function() {
        console.log(`I am  ${this.sname}, I am ${this.sage}`);
    }
}
var erya = new Student("erya", 11);

①定义函数时
Student作用域链一个为空一个为window，地址为0x1234；
window对象中保存全局变量erya和全局函数Student的地址0x1234

②调用函数时
Student临时创建函数作用域对象0x2345，且作用域最近格子通过地址引用此对象。

new会在外部创建一个对象，地址为0x9091；

自带的this，会被new出来的新对象吸引
this -> new刚创建的新对象

③执行函数时，强行赋值
强行赋值：在new出来的新对象中自动添加属性

④返回新对象的地址，保存到=左边的变量里
window中的全局变量erya接收到new出来的新对象