1. 面向对象
a) 单例模式(单体模式)
let name = 'Datura';
let age = 18;
let person = {
name,
age,
sex:'Man',
showName:function(){return this.name},
showAge:function(){return this.age}
};
alert(person.showAge()); //18
alert(person.sex); //Man
b) 工厂模式
es5的面向对象工厂模式:
首先让我们一起来回一下es5面向对象的写法:
i) 首先定义一个构造函数(此处是 Person);
ii) 定义Person的“属性”,用this.xxx = xxx;
iii) 把方法挂在原型上,Person.prototype.xxx = function(){ xxx };
iiii) 调用
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
return this.name;
};
Person.prototype.showAge = function(){
return this.age;
};
var p1 = new Person('alice',18);
alert(p1.showAge()); //18
es5继承:
//定义一个Person构造函数
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
return this.name;
};
Person.prototype.showAge = function(){
return this.age;
};
//Worker构造函数
//继承属性
function Worker(name,age,job){
//改变this指向,继承Person的属性
Person.apply(this,arguments);
//定义worker新的属性
this.job = job;
}
//继承方法
Worker.prototype = new Person();
//给worker指定“亲爹”
Worker.prototype.construcotr = Worker;
//定义worker新的方法
Worker.prototype.showJob = function(){
return this.job;
};
//调用
var p2 = new Worker('Datura',20,'boss');
alert(p2.showName()); //Datura
alert(p2.showJob()); //boss
es6的面向对象工厂模式:
i) 首先定义一个构造函数(此处是 Person),注意用class关键字而不是function;
ii) 定义Person的“属性”,写在constructor(){this.xxx = xxx };
iii) 定义方法,xxx () { xxx };
iiii) 调用
iiiii) 注意constructor和方法之间没有“;”,可以给属性初始值或默认值
class Person{
constructor(name,age=25){ //可以给属性初始值或默认值,正常es的function函数也可以给默认值
this.name = name;
this.age = age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
var p1 = new Person('alice',18);
alert(p1.showAge()); // 18
es6继承:
//父类构造函数Person
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
//子类继承父类
class Worker extends Person{
constructor(name,age,job='搬砖的'){ //继承父类属性,并新加属性给默认值
super(name,age);
//这里必须传参,也就是需要把原来构造函数的参数传入。
//子类必须在constructor方法中调用super方法,否则新建实例时会报错。
//这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
this.job = job;
}
//给子类定义新方法showJob
showJob(){
return this.job;
}
}
//调用
var w1 = new Worker('rose',17);
alert(w1.showJob());
alert(w1.showName());
2. 模块化
注意:目前还没有浏览器支持模块化(需要引入traceur.js和bootstrap.js)
第三方:seajs require.js 模块化工具
那么我们来学习下,es6自带的模块化
a).导出,将变量a“暴露”出去
const a =12;
export default a;
b).导入1.js文件“暴露”的东西,并用modA 接收
import modA from './1.js'; (./代表同级目录下)
c).同一个模块导出多个值 export default {a:12,b:5};
d).不同模块间的引入
import modA from './mod1.js';
import modB from './mod2.js';
let sum = modA+modB;
export default sum;
实例写个小例子:
//mod1.js文件的内容
const a = 12;
export default a;
//mod2.js文件的内容
const b = 5;
export default c;
//主入口(模块)的内容
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module">
import modA from './mod1.js';
import modB from './mod2.js';
alert(modA+modB); //17
</script>
一个子模块“暴露”一个json数据
//mod3.js文件的内容
export default {a:12,b:5};
//主入口(模块)的内容
import modA from './mod3.js';
console.log(modA.a+modA.b); // 17
网友评论
Worker.prototype.construcotr = Worker;
应该是Worker.prototype.constructor = Worker;
1. //给worker指定“亲爹”
Worker.prototype.construcotr = Worker;
此处constructor指定到Worker是否有误?不应该是Person吗?
2. Person.prototype.showJob = function(){
return this.job;
}
这个地方的Person应该也是手写错误吧,不然你把showJob挂载到Person上去不就修改了Person这个父类构造器了吗?如是是为了修改父类感觉这种做法欠妥,将来会影响其他的代码执行。我感觉你的应该是挂载到Workder上去的。
谢谢您的技术心得分享,在您的笔记中能学到此些技术是一种恩赐!
1.。Worker.prototype.construcotr = Worker; 作用是改变Worker的construcotr 。不然Worker的construcotr还是指向原来的Person的。Worker.prototype = new Person();是通过new方式来继承Person的“方法(函数)”。
2。 Person.prototype.showJob = function(){return this.job; },这个确实是Worker,因为是给Worker增加新的方法,已修改更新。