前端学习(三十四）对象&模块化（笔记）
人，工人
//类的定义
function Person(name,age){ //构造函数
//工厂模式
//1.原料
//var obj = new Object();
//2.加工
this.name = name;
this.age = age;
//3.出厂
//return obj;
}
//方法
Person.prototype.showName = function(){
return this.name;
};
//实例化
var p1 = new Person('zhangsan',28);
new:
1. 创建一个新的空白对象
2. 把这个对象赋值给 this
3. 自动返回this
//继承 工人 -> 人
1)继承属性
function Worker(name,age,job){
//继承父类属性
Person.apply(this,arguments);
//增加自己的属性
this.job = job;
}
2)继承方法
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
* 万物皆对象
* 能new的东西都是函数
* 构造函数约定首字母大写
* 实例化一个类的时候（new Person()），构造函数自动执行
* 类的原型 prototype 可以用来扩展系统方法
* 解决this:
1) 在this正确的地方，存一下
2) fn.call(this的指向，参数1...);
3) fn.apply(this的指向，[参数1....]);
4) bind
var a = fn.bind(this的指向，参数1);
a(参数2);
//this 正确
oBtn.onclick = function(){
//this 指向按钮，希望指向外面
}.bind(this);
* 类型检测
1） typeof ： 基本类型
数字，字符串，布尔，undefined
2）instanceof : 用于检测 当前对象是不是某个类的实例， 包含父级以及一直向上
alert(p1 instanceof Person); √
alert(p1 instanceof Object); √
3）constructor：用户判断当前对象的是不是由某个类构造出来的
p1.constructor == Person
==========================
一、ES6前面向对象周边的知识
1、给一个类的原型上加方法时，要一个一个加，不能用一个JSON整体覆盖，否则，会把原来已经有的东西覆盖掉（prototype.constructor 被覆盖）
2、原型链
使用某个方法或属性时，先看自己有没有，如果自己有就用自己的，否则找父级...一直找到为止 —— Object
* 如果一个对象属于子类，那么这个对象必然属于这个子类的父类。
* 作用链：
var c = 100;
function aaa(){
var c = 5;
function bbb(){
//var c = 12;
alert(c);
}
bbb();
}
aaa();
show(1)(2)(3); —— 6 //返回函数
aa(1).bb(2).cc(3); —— 6 //返回JSON
3、所有东西都是对象？
基本类型不是对象。
除了基本类型外，其它的东西都是对象。
包装类型：
数字 Number
字符串 String
布尔 Boolean
undefined Undefined ×
* 包装类型，在JS中，没用。
4、单体模式/单例模式 设计模式
以前： 工厂模式
* 只有一个实例，不能扩展 —— 利用 JSON
let Person = {
name:'张三',
age:18,
showName(){
return this.name + '^_^';
}
};
5、命名空间
利用JSON,把一些独立的模块、频道、子系统 ，中使用的变量的包起来。
达到： 避免变量名冲突
例：
let top = {
a:12
}
let body = {
a:5
}
let footer = {
a:20
}
top.a
body.a
footer.a
变量冲突的解决：
1、封闭空间
2、面向对象 ： 把相同的变量放到不同的对象里
3、命名空间（名称空间）
4、模块化
6、this 的问题
this: 发生事件的对象（元素），当前方法属于谁，this就是谁
对this优先级进行排序：只供参考
1） new > 定时器
2） 定时器 > 事件
3） 事件 > 方法
4） 其它 （window）
优先级： new > 定时器 > 事件 > 方法
7、js 中的 BUG （自相矛盾的地方）
1、Object 和 Function 互为爹，自称爹
* 一切都是对象
* 能new 都是函数
2、只认爹，不认爷
3、花祖宗的钱，不认祖宗
==========================
二、ES6面向对象
类、构造函数 —— 面向对象(java)
类：
定义——
//类
class Person{
//构造函数
constructor(name,age){
this.name = name;
this.age = age;
}
//方法
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
使用——
let p1=new Person('zhang3',28);
继承：
class Worker extends Person{
constructor(name,age,job){
super(name,age); //相当于调用 父级 的构造函数
this.job = job;
}
showJob(){
return this.job;
}
}
*super —— 超类
==========================
用面向对象的方式写程序 ， 没有统一的写法。
例1：点div变红
例2：选项卡
==========================
模块化：
一、什么，为什么
模块化：把一个大的系统，一个较复杂的功能，切分为若干个小部分。
有利于 系统的扩展、人员之间分工合作、可以提高效率...
二、JS中模块化：
09年，美国，一哥们，写了一个程序 —— NodeJS
标志着JS中模块化开发的开始。
三、JS中模块化遵循的标准：
CommonJs： NodeJS —— 同步
const express = require('express');
let server = express();
AMD: —— 异步
Asynchronous Module Definition 异步模块定义
库：requirejs
CMD：
库：seajs
官网： seajs.org
四、requirejs
安装：
1) 官网下载
http://requirejs.org/
2) npm i requirejs
