原型模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原型模型</title>
</head>
<body>
</body>
</html>
<script>
// 利用构造函数 实现面向对象
function Person(nickname) {
this.nickname=nickname;
}
let person = new Person('333')
console.log(person);
console.log(person.nickname);
person.nickname = '444';
console.log(person);
console.log(person.nickname);
Person.prototype.eat = function(food){
console.log(this.nickname + '吃' + food);
};
person.eat('核桃')
// 继承
function Man(nickname,age) {
Person.call(this,nickname);
this.age = age;
}
Man.prototype = new Person();
Man.prototype.constructor = Man;
let man = new Man('大宝贝',39);
console.log(man);
console.log(man.nickname);
console.log(man.age);
man.eat('荔枝');
</script>
类变量与私有属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类变量与私有属性</title>
</head>
<body>
</body>
</html>
<script>
class Person {
static slogan = '嘿嘿嘿';
// 私有属性
#food = '核桃';
#flower;
// 公有属性
nickname = '哈哈';
eat(food) {
console.log(this.nickname + '吃' + this.#food);
}
set flower(flower){
console.log('set');
this.#flower = flower;
}
get flower(){
console.log('get');
return this.#flower;
}
}
console.log(Person.slogan);
let person = new Person();
console.log(person);
person.eat();
person.nickname = '大宝子';
person.food = '芒果';
person.eat();
console.log(person);
// 调用set方法为私有属性赋值
person.flower = '牡丹';
// 调用get方法获取私有属性的值
console.log(person.flower);
</script>
面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>面向对象</title>
</head>
<body>
</body>
</html>
<script>
class Person{
// 构造方法
constructor(gender,age){
this.gender = gender;
this.age = age;
}
// 类方法
static haha(){
console.log('二十四笑')
}
// 实例方法
eat(food){
console.log(`吃${food}`);
}
}
// 类名点方法名 调用 类方法
Person.haha();
let Person01 = new Person(1,39);
console.log(Person01);
console.log(Person01.gender);
console.log(Person01.age);
Person01.eat('核桃');
Person01.gender = 1;
Person01.age = 40;
console.log(Person01);
console.log(Person01.gender);
console.log(Person01.age);
// Uncaught TypeError: Person01.haha is not a function
// 对象无法调用方法
// Person01.haha();
// 拓展 实例方法
Person01.heihei = function () {
console.log('今晚和你嘿嘿嘿')
}
Person01.heihei();
// 拓展 类方法
Person.hehe = function (){
console.log('呵呵');
}
Person.hehe();
// Uncaught TypeError: Person01.hehe is not a function
// Person01.hehe();
class Man extends Person {
constructor(gender, age, nickname) {
super(gender, age);
this.nickname = nickname;
}
work() {
console.log('日出而作 日落而归');
}
}
let man = new Man(1, 39, '李昊哲');
console.log(man);
man.work();
man.eat('芒果')
class Woman extends Person {
constructor(gender, age, nickname) {
super(gender, age);
this.nickname = nickname;
}
// 方法重写
eat(food) {
console.log(this.nickname + '吃' + food);
}
}
let woman = new Woman(0,18,'大美丽');
console.log(woman);
woman.eat('荔枝');
</script>
简化面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简化面向对象</title>
</head>
<body>
</body>
</html>
<script>
let person = {
nickname: '嘿嘿',
age: 39,
gender: 1,
eat: function (food) {
console.log(this.nickname + '吃' + food);
},
work : ()=>{
console.log(this.nickanme + '日出而作,日落而归');
}
};
console.log(person);
person.eat('芒果');
person.work();
</script>
call apply bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>call apply bind</title>
</head>
<body>
</body>
</html>
<script>
// 在JavaScript中this的指向是不固定的,
// 但是我们可以通过使用bind()、call()、apply()来改变this的指向,
// 但是在ES6中this的指向与之前的有所不同
let a = {
fn: function (a, b) {
console.log(a + b);
}
};
let fn = a.fn;
// call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
fn.call(this, 10, 20);
// apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数.
fn.apply(this,[20,30]);
// bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用
fn.bind(a,30,40)();
</script>