Skip to content

Commit

Permalink
update this
Browse files Browse the repository at this point in the history
  • Loading branch information
@Brolly0204
Brolly0204 committed Jul 1, 2017
1 parent 6963293 commit 0eac26e
Show file tree
Hide file tree
Showing 6 changed files with 362 additions and 50 deletions.
72 changes: 72 additions & 0 deletions 第一周/Day4/10.类和实例.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
// 构造原型模式 插件封装

// function Per() { // 类中this就是当前实例对象
// this.id = 1;
// this.say = 'nihao';
// }
// var per1 = new Per();
// console.log(per1);
// var per2 = new Per();
// console.log(per2 === per1);

function User(name, age) { // 类中this.xxx就是给当前实例对象添加私有属性
var num = 100; // 私有变量和实例对象没有关系
this.name = name;
this.age = age;
this.fn = function () {

}
}
var user1 = new User('zhufeng1', 18);
var user2 = new User('zhufeng2', 20);
console.log(user1);
console.log(user2);


// 实例间属性 共享问题 原型对象（存储当前类所属实例的公用的属性和方法）
// 每一个类都有一个天生自带的属性 原型（prototype）是一个对象数据类型的值

User.prototype.say = function () {
alert('my name is' + this.name + ' 今年 ' + this.age);
};

// user1.say();
// user2.say();

console.log(user1.say === user2.say); // 公有方法
console.log(user1.fn === user2.fn); // 私有方法
console.log(User.prototype.say === user1.say);

// hasOwnProperty 检测属性是否是私有的
// console.log(user1.hasOwnProperty('fn'));
// console.log(user2.hasOwnProperty('fn'));
// console.log(user2.hasOwnProperty('say'));
//
// console.log(Array.prototype);
// console.log(String.prototype);
//
// var arr1 = [1];
// var arr2 = [2];
// console.log(arr1.slice === arr2.slice);
// console.log(Array.prototype.slice === arr1.slice);
// // new Tab()
// user1.say();
// user2.say();

// 工厂模式 和构造函数模式区别
// 构造函数 通过new 关键字 作为一个类执行 默认创建一个实例对象 ->形参赋值/预解释 -> 代码从上到下执行 默认将 实例对象 返回
// 类中this是当前实例对象 this.xxx就是给当前实例对象添加私有属性



</script>
</body>
</html>
89 changes: 89 additions & 0 deletions 第一周/Day4/6.单例模式.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
// 单例模式 分组对象 解决变量冲突
// '命名空间' newsRender and musicRender 多人协作是将多个模块 同时开发 以单例分组形式 开发 最终将代码整合到一起

// common module
var commonRender = {
getDate: function () {
return new Date();
}
};


// news module
// var newsRender = {
// mess: 'hello news',
// say: function () {
// console.log(this.mess);
// alert(commonRender.getDate());
// },
// init: function () {
// this.say();
// }
// };
//
// newsRender.init();
//
// // music module
// var musicRender = {
// mess: 'hello zhufeng',
// say: function () {
// console.log(this.mess);
// alert(commonRender.getDate());
// },
// bindEvent: function () {
//
// },
// init: function () {
// this.say(); // 弹出欢迎语
// this.bindEvent(); // 进行事件绑定
// }
// };
//
// musicRender.init();


// music module
var musicRender = (function () {
var mess = 'hello music';

function say() {
console.log(mess);
alert(commonRender.getDate());
}

return {
mess: mess,
say: say
}
})();
musicRender.say();

var mess = '全局的吗mess';

// news module
var newsRender = (function () {
var mess = 'hello zhufeng';

function say() {
console.log(mess);
alert(commonRender.getDate());
}

return {
mess: mess,
say: say
}
})();

newsRender.say();
</script>
</body>
</html>
42 changes: 42 additions & 0 deletions 第一周/Day4/7.工厂模式.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var user1 = {
name: 'zhufeng1',
age: 18
};

var user2 = {
name: 'zhufeng2',
age: 20
};


// 工厂模式 将相同功能代码 以函数的形式封装起来 减少冗余代码
function createObj(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function () {
alert('my name is' + this.name + ' 今年 ' + this.age);
};
return obj;
}

var zhufeng1 = createObj('zhufeng1', 18);
console.log(zhufeng1);
zhufeng1.say();

var zhufeng2 = createObj('zhufeng2', 20);
console.log(zhufeng2);
zhufeng2.say();


</script>
</body>
</html>
48 changes: 48 additions & 0 deletions 第一周/Day4/8.面向对象.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
// 面向对象OO 以 ‘对象’为中心 编程思想

// 万物皆对象 自然界
// 类 对对象的具体细分 人类 Array
// 实例 就是类中具体 事物 一个人 []

// 类 继承 封装 多态
// 继承 子类 可继承 父类
// 封装 封装类上的一些属性方法
// 多态 重载和重写 （js重写）
// 重写 子类可以父类属性和方法

var obj = {};
var obj2 = new Object();

// 内置类 Array Object String Date Number Boolean RegExp...
// [] [1,2] [2] Array
// {} {id: 1} Object
// '' '123' 'zhufeng' String

function fn() {
console.log('string');
}

function fn() {
console.log('number');
}

function fn(n) {
if(typeof n === 'string') {
console.log('string');
} else if(typeof n === 'number') {
console.log('number');
}
}

fn(1)
</script>
</body>
</html>
62 changes: 62 additions & 0 deletions 第一周/Day4/9.构造函数模式.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
// 构造函数模式 创建一个自定义类 以及它实例

// 类本身就是一个函数
// var arr = new Array(); // 实例化创建 arr Array 实例
// var arr = [];
// console.log(Array);
//
// console.log(Object);
// var str = new String('nihao');
// console.log(str);


// function Person() {
//// 作为一个类执行的时候 默认创建一个对象 （实例对象）
//
//// 默认返回这个实例对象
// }
// var person = new Person(); // 构造函数模式执行 把Person当做一个类 并且返回这个类实例
// console.log(typeof person); // 'object' 实例都是对象数据类型
// console.log(Person()); // 普通函数执行
// var person1 = new Person;
// var person2 = new Person;
// var person3 = new Person;
// console.log(person1 === person2); // 实例都是一个单独的个体
// console.log(person1);


// function Foo() {
//
// }
// var foo = new Foo;
// console.log(foo instanceof Foo);
// console.log(person1 instanceof Foo);
// console.log(Person instanceof Object); // true
// console.log(person1 instanceof Object); // true

// instanceof 检测一个实例是否属于这个类
// console.log(person1 instanceof Person); // true
// var arr = new Array;
// console.log(arr);

// console.log([] instanceof Array);
// console.log(/\d/ instanceof RegExp);

// Object 是基类 所有对象数据类型都是 Object一个实例
// console.log(Array instanceof Object);
// console.log(String instanceof Object);
// console.log(RegExp instanceof Object);
// console.log([] instanceof Object);
// console.log(/\d/ instanceof Object);
// console.log({} instanceof Object);
</script>
</body>
</html>
Loading

0 comments on commit 0eac26e

Please sign in to comment.