JavaScript 进阶（三）

一、编程思想

二、构造函数

JS 通过构造函数，实现面向对象的封装性

【总结】

三、原型

1.  原型

黄圈中的是原型

【总结】

【补充】构造函数和原型对象中的this 指向

【练习】

自定义方法，写在数组的原型上

... arr 展开运算符，可以将数组变为字符串 即【1,2,3】变为 1，2，3

原型函数里面的this 指向谁?  指向的是 实例对象 arr

黄框中为求累加和的方法

2.  constructor 属性

赋值形式，会覆盖构造函数中原型对象原来的内容

所以用 constructor

constructor 作用：重新指回创造这个原型对象的构造函数

3.  对象原型 -proto-

关系图

4.  原型继承

女人通过原型继承

男人通过原型继承

5.  原型链

注意：只要是对象，都有原型 -proto- ，指向原型对象

只要是原型对象，里面就有 constructor ，指向创造原型对象的构造函数

原型链的查找规则

【补充】instanceof 运算符

检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

四、【综合案例】

1.  modal 业务

【代码】

把实参传给形参

每 new 一次，都创造一个对话框

2.  打开方法 open 部分

注意：如果需要用 this 时，就不能用箭头函数

【代码】

3.  关闭方法 close 

注意：i 是关闭按钮（自己定义的，可以是任何字母）

通过 remove 可以将盒子移除

什么时候移除，等把盒子调用出来了之后，就可以添加点击事件，调用 close ，进行关闭

【代码】

【深入面向对象总结】

【重点】

好啦！本次的分享到这里就结束啦！我们下次不见不散！！！