/*
面向对象编程
本质 创建一个对象
可以用 属性属性值的 方式 存储 数据参数
函数的参数 只能存储在形参之中 只能在函数内部使用 不能在函数外部直接调用
可以用 函数的形式 存储需要执行的程序内容
调用生成的对象,属性属性值就是需要的数据参数,函数方法就是需要执行的程序
定义 属性属性值存储参数数据
通过构造函数定义实例化对象
通过 new 关键词/语法 执行调用 构造函数
new 语法 会自动定义 一个对象,并且返回一个对象
this 指向 这个 被JavaScript自动创建 自动返回的 对象
返回的对象,最终会存储在变量中
this 实际指向的就是 这个变量
在构造函数中,不能使用 let const 定义变量
定义 函数方法
通过 prototype 来定义 构造函数的方法
prototype 是每一个 函数都天生具有的 属性 是一个 公共的空间
所有通过这个构造函数生成的实例化对象,都可以代用这个公共空间中的内容
在 prototype 中 只能调用 之前 在构造函数中定义的实例化对象的属性和属性值
在 prototype 中 不能以 this 语法定义属性和属性值
在 prototype 中 可以用 let 或者 const 定义 变量数值
本质上就是在定义一个匿名函数 只是存储在 prototype 中的一个匿名函数
原型链:
prototype : 函数天生就具有的属性
是一个公共空间 构造函数生成的实例化对象的__proto__ 就是 构造函数的prototype
__proto__ : 对象天生就具有的属性
通过 __proto__ 可以访问 生成这个对象,构造函数的 prototype 的公共空间
所谓的原型链 : 将 数据 通过 __proto__ 串联起来,形成数据链结构 称为原型链
定义在顶级/父级对象,公共空间的中的属性和方法,可以被所有的子级通过 __proto__ 调用和执行
原型链的执行是一个自动过程 当 一个对象等调用属性/方法时,先在自身上,自身没有去父级公共空间找,父级没有再去父级的父级找
以此类推,最终找到 顶级对象 Object 如果也没有,返回undefined
顶级对象 Object (定义了一个方法) ---> Array() 构造函数 ---> 生成一个 arr[] 数组
顶级对象 Object (定义的方法) <---- Array() 构造函数 通过 __proto__ <--- arr[] 数组 通过 __proto__
爷爷 (方法) ---- 爹 --- 孙子
爷爷身上有个函数方法,没有定义在爹身上,也没有定义在孙子身上
但是 孙子 可以通过 __proto__ 找到 爹
爹 本身也有 __proto__ 可以 找到 爷爷 然后 调用 爷爷身上的 方法
<script>
const obj = new CreateObj('张三');
obj.fun();
// 使用 function 定义构造函数
// JavaScript会执行预解释,可以提前调用构造函数,生成实例化对象
function CreateObj(name) {
this.name = name;
}
// 定义 prototype 公共空间中的 内容
// 不会被 预解释
// 调用 fun 这个函数 必须在 这个行代码之后,不能提前调用
CreateObj.prototype.fun = function(){
console.log( this.name );
}
console.log(obj);
// ES5 语法定义的构造函数,在面向对象编程中,还有很多问题
// ES6 语法中,定义了新的构造函数的定义方法 class 类
// 专门用于定义 构造函数的语法
// 新增很多构造函数的操作方法,让js的面向对象编程更加完善
// 在 三阶段 框架中 对 js 的面向对象 才是完整的 面向对象
// class语法的本质就是 构造函数
// 语法结构和内容是完全相同的 只是 代码书写不同
// 就好像 for循环 和 while循环
// ES6 的 class 没有预解析,不能提前调用
// ES5
function CreateObj1(name) {
this.name = name;
}
CreateObj.prototype.fun1 = function(){
console.log( this.name );
}
const obj1 = new CreateObj1('张三');
obj1.fun1();
// ES6
class CreateObj2{
constructor(name){
this.name = name;
}
fun2(){
console.log( this.name )
}
}
const obj2 = new CreateObj1('张三');
obj2.fun2();
</script>