Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vacricticy
Vacricticy committed Oct 2, 2020
1 parent 9c3b1a5 commit 1b80c2c
Show file tree
Hide file tree
Showing 7 changed files with 296 additions and 135 deletions.
46 changes: 21 additions & 25 deletions 1.面向对象/02.类中添加方法.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,29 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>

<body>

</body>
</head>

<body></body>
</html>
<script>
class Star {
constructor(name, age) {
this.name = name;
this.age = age;
};
// 注意：方法与方法之不是逗号
sing(song) {
console.log(this.name + song);
}
class Star {
constructor(name, age) {
this.name = name;
this.age = age;
}
// 注意：方法与方法之不是逗号,这是类，不是对象！
sing(song) {
console.log(this.name + song);
}
var adele = new Star('阿黛尔', 30)
var wf = new Star('王菲', 40)
console.log(adele);
console.log(wf);
}
var adele = new Star("阿黛尔", 30);
var wf = new Star("王菲", 40);
console.log(adele);
console.log(wf);

adele.sing('hello') //阿黛尔hello
wf.sing('人间') //王菲人间
</script>
adele.sing("hello"); //阿黛尔hello
wf.sing("人间"); //王菲人间
</script>
97 changes: 46 additions & 51 deletions 1.面向对象/03.类的继承.html
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,54 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>

<body>

</body>
</head>

<body></body>
</html>
<script>
// class Father {
// constructor() {

// }
// money() {
// console.log(100);
// }
// }
// class Son extends Father {

// }
// var son = new Son()
// son.money()

class Father {
constructor(x, y) {
this.x = x
this.y = y
};
// 父类中的this指向的是父类构造函数创建的实例对象
// 因为父类中的函数所访问的变量是在父类的实例对象身上去找的，
// 所以子类若想在调用的父类的方法中使用自身的变量，则需要通过super调用父类构造函数将其值传入父类中。
sum() {
console.log(this.x + this.y);
}
// class Father {
// constructor() {

// }
// money() {
// console.log(100);
// }
// }
// class Son extends Father {

// }
// var son = new Son()
// son.money()

class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
// 关键字extends
class Son extends Father {
constructor(x, y) {
// 通过super调用父类的构造函数
super(x, y)
}
// 父类中的this指向的是父类构造函数创建的实例对象
// 因为父类中的函数所访问的变量是在父类的实例对象身上去找的，
// 所以子类若想在调用的父类的方法中使用自身的变量，则需要通过super调用父类构造函数将其值传入父类中。
sum() {
console.log(this.x + this.y);
}
var son = new Son(1, 2)
var son2 = new Son(2, 3)
son.sum()
son2.sum()


// 可能出现的报错：
// ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
// 翻译： 当在访问this或在子构造函数return之前， 必须在子构造函数中先调用super构造函数。
// 解释：在子类访问this或在子类的构造函数返回实例对象前，必须调用super父类构造函数
</script>
}
// 关键字extends
class Son extends Father {
constructor(x, y) {
// 通过super调用父类的构造函数
super(x, y);
}
}
var son = new Son(1, 2);
var son2 = new Son(2, 3);
son.sum(); //3
son2.sum(); //5

// 可能出现的报错：
// ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
// 翻译： 当在访问this或在子构造函数return之前， 必须在子构造函数中先调用super构造函数。
// 解释：在子类访问this或在子类的构造函数返回实例对象前，必须调用super父类构造函数
</script>
55 changes: 25 additions & 30 deletions 1.面向对象/06.使用类的注意事项.html
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,35 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
</head>

<body>
<body>
<button>按钮</button>
<script>
var that
class Star {
constructor(name) {
that = this
console.log(this); //输出：Star{} 输出的是实例对象
this.name = name
this.sing('Someone like you')
var btn = document.querySelector('button')
btn.onclick = this.sing.bind(btn, 'hello');
}
sing(song) {
console.log(this);
console.log(that.name + song); //通过that获取实例对象上的值
}
var that;
class Star {
constructor(name) {
that = this;
console.log(this); //输出：Star{} 输出的是实例对象
this.name = name;
this.sing("Someone like you");
var btn = document.querySelector("button");
btn.onclick = this.sing.bind(btn, "hello");
}
sing(song) {
console.log(this);
console.log(that.name + song); //通过that获取实例对象上的值
}
}

var adele = new Star('阿黛尔')
console.log(adele === that); //输出true 构造函数中的this指向的是实例对象


// es6中类没有变量提升，必须先定义类，再创建实例对象
// ♥ 类中的共有属性和方法在访问时必须加this
var adele = new Star("阿黛尔");
console.log(adele === that); //输出true 构造函数中的this指向的是实例对象

// 问题：js中哪些元素有变量提升
// es6的类没有变量提升，必须先定义类，再创建实例对象
// ♥ 类中的共有属性和方法在访问时必须加this
</script>
</body>

</html>
</body>
</html>
96 changes: 96 additions & 0 deletions 2.构造函数和原型/18.js实现继承的方式.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
function Animal(name, size, likes) {
this.name = name || "Animal";
this.size = size || "small";
this.sleep = function () {
console.log(this.name + " is sleeping");
};
this.likes = likes || [];
}
Animal.prototype.eat = function (food) {
console.log(this.name + " is eating " + food);
};

// // 6.寄生组合继承
// // 解决组合继承中的冗余问题，将 实例属性/方法的继承 与 原型对象上属性/方法的继承 分开
// function Cat(name, size) {
// Animal.call(this, name, size); //继承实例属性和方法
// (function () {
// var Super = function () {};
// Super.prototype = Animal.prototype; //通过寄生方式，砍掉父类的实例属性。使子类的原型直接指向的实例不包括父类的实例属性；这样就不会初始化两次实例方法/属性，避免的组合继承的缺点
// Cat.prototype = new Super();
// })();
// }
// var cat = new Cat("alice", "big");
// console.log(cat.name); //alice
// console.log(cat.size); //big
// cat.sleep(); //alice is sleeping

// // 5.组合继承:原型链继承+构造继承
// // 优点：
// // 弥补了原型链继承的局限性，可以传参；
// // 弥补了构造继承的局限性，可以继承原型上的属性和方法
// // 缺点：调用了两次父构造函数，多消耗了一些内存
// function Cat(name, size) {
// Animal.call(this, name, size);
// }
// Cat.prototype = new Animal();
// var cat = new Cat("alice", "big");
// console.log(cat.name); //alice
// console.log(cat.size); //big
// cat.sleep(); //alice is sleeping

// // 4.拷贝继承，利用for..in可以遍历原型对象属性的特性
// // 特点：可以多继承
// // 缺点：因为存在拷贝，内存占用高；无法获取父类不可枚举的方法（for in 只能获取枚举的属性）
// function Cat(name) {
// var animal = new Animal();
// for (key in animal) {
// Cat.prototype[key] = animal[key];
// }
// Cat.prototype.name = name || "tom";
// }
// var cat = new Cat("jim");
// console.log(cat.name);
// cat.sleep();
// console.log(cat instanceof Animal); //false
// console.log(cat instanceof Cat); //true

// // 3.实例继承
// // 核心：在子构造函数中创建一个父类实例，并在其上添加新特性，然后返回这个对象
// // 特点：可以通过new调用，也可直接调用
// // 缺点：实例是父类的实例，不是子类的实例; 不支持多继承; 而且在子构造函数的原型对象上添加方法是无效的。
// function Cat(name) {
// var instance = new Animal();
// instance.name = name || "Tom";
// return instance;
// }
// Cat.prototype.sing = function () {
// console.log("sing a song");
// };
// var cat = new Cat("jim");
// console.log(cat.name); //jim
// cat.sleep(); //jim is sleeping
// cat.sing(); // cat.sing is not a function

// // 2.构造继承
// function Cat() {
// Animal.call(this);
// }
// var cat = new Cat("tom");
// console.log(cat.name); //tom
// cat.sleep(); //tom is sleeping

// 1.原型链继承
function Cat() {}
Cat.prototype = new Animal();
console.log(Cat.prototype);

var cat = new Cat();
console.log(cat.name); //Animal
cat.sleep(); //Animal is sleeping
console.log(cat instanceof Cat); //true
console.log(cat instanceof Animal); //true

var cat2 = new Cat();
cat.likes.push("play");
console.log(cat2.likes); //[ 'play' ]
64 changes: 64 additions & 0 deletions 2.构造函数和原型/20.getter语法和setter语法.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
// 1.get语法会将对象的属性绑定在一个取值函数身上，调用该属性即调用该函数，该函数会返回一个值，这个值将作为这个对象属性的值
let o1 = {
get name() {
return "liu1";
},
};
console.log(o1); //{ name: [Getter] }
console.log(o1.name); //liu1

// 2.可以使用definedProperty在现有的对象上定义getter
console.log("-------2-------");
let o2 = {};
Object.defineProperty(o2, "name", {
// enumerable: true, //默认是不可枚举的，修改为可枚举才能在打印该对象时看到该属性
get() {
return "liu";
},
});
console.log(o2); //{ name: [Getter] }
console.log(o2.name); //liu

// 3.同样，set语法也会将对象的属性绑定在一个函数身上，当调用该属性时，即是调用该函数
console.log("--------3---------");
let o3 = {
list: [],
set name(value) {
name = value;
this.list.push(value);
},
};
o3.name = "xiao";
o3.name = "kang";
console.log(o3.list); //[ 'xiao', 'kang' ]
console.log(o3.name); //undefined name属性是未定义的，所以访问时会返回undefined

// 4.使用defineProperty为当前对象的属性定义setter
console.log("---------4----------");
const o4 = {
a: 0,
};
Object.defineProperty(o4, "b", {
set(value) {
this.a += value;
},
});
o4.b = 10;
o4.b = 10;
console.log(o4.a); //20

// 5.使用setter和getter监听属性的变化
console.log("-------5---------");

var obj5 = {};
Object.defineProperty(obj5, "a", {
get() {
return a;
},
set(value) {
a = value;
// 需要触发的渲染函数写在这里，这样在属性改变的时候就不需要手动调用渲染函数了
},
});
obj5.a = "liu";
console.log(obj5.a); //liu
Loading

0 comments on commit 1b80c2c

Please sign in to comment.