プロセス指向および思考指向
プロセス指向
プロセス指向とは、問題を見つけるために必要なステップを分析し、関数を使用してこれらのステップを1つずつ実装し、使用時に1つずつ呼び出すことです。
精神志向
プロセス指向とは、業務をオブジェクトに分割し、作業とオブジェクト間の協力を分割することです。
思考指向の特徴
- オブジェクトの一般的な属性と動作を抽出し、それらをクラス（テンプレート）にカプセル化します。
- クラスをインスタンス化し、クラスのオブジェクトを取得します
オブジェクトは、関連するプロパティとメソッドの順序付けられていないコレクションであり、すべてのものをオブジェクトにすることができます。たとえば、文字列番号などです。
- 属性：オブジェクトの特性。オブジェクト（名詞）の属性で表されます。
- メソッド：オブジェクト内のメソッド（動詞）で表されるオブジェクトの動作
クラス
ES6の過程で、クラスの概念が導入されました。クラスはオブジェクトの共通部分を抽出し、クラスは通常、大きなクラスを参照します。
クラスとオブジェクトを作成する
予防
インスタンス化されたオブジェクトは、新しいキーワードクラスのコンストラクターが実行される限り、newである必要があります。
Constructor（）はクラスのコンストラクターであり、パラメーターを渡し、インスタンス化されたオブジェクトを返すために使用されます。
classを使用して、クラス名の最初の文字を大文字にし、括弧を追加せずにクラスを作成します。クラス内の
すべての関数で関数を追加する必要はなく、複数の関数の間にコンマを追加する必要もありません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建类与对象</title>
</head>
<body>
</body>
<script>
// 创建类
class People {
constructor(name, age) {
this.name = name;
this.age = age;
}
say(sing) {
console.log(sing)
}
}
// 创建实例化对象
let YaoZiMo = new People('尧子陌', "18");
console.log(YaoZiMo.name);
console.log(YaoZiMo.age);
YaoZiMo.say('两只蝴蝶')
</script>
</html>
クラス継承
extendsを使用して、サブクラスが親クラスから継承できるようにします
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类的继承</title>
</head>
<body>
</body>
<script>
// 类的继承
class Father {
constructor() {
}
money() {
console.log(100)
}
}
// 继承父类中的方法与属性
class Son extends Father {
}
// 创建子类的实例化对象
var son = new Son();
son.money()
</script>
</html>
通常の関数を呼び出す
スーパーキーワード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>super调用普通函数</title>
</head>
<body>
</body>
<script>
// 父类
class Father {
say() {
return 'hello word'
}
}
// 子类
class Son extends Father {
say() {
console.log(super.say())
}
}
var son = new Son();
son.say()
</script>
</html>
サブクラスは親クラスのメソッドを継承し、独自のメソッドを拡張します
注：サブクラスコンストラクターでは、この前にsuper（）を呼び出す必要があります
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子类继承父类的方法 同时扩展子类的方法 </title>
</head>
<body>
</body>
<script>
// 父类 有加法方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y)
}
}
// 子类
class Son extends Father {
constructor(x, y) {
// super（）方法必须在子类的this之前进行调用
super(x, y)
this.x = x;
this.y = y;
}
subduction() {
console.log(this.x - this.y)
}
}
// 对子类进行实例化 获取类的对象
var son = new Son(5, 3);
// 子类调用父类的方法
son.sum()
son.subduction()
</script>
</html>
ES6のクラスとオブジェクトについて注意すべき3つのポイント。
1. ES6では、クラスに変数の昇格がないため、オブジェクトをインスタンス化する前にクラスを定義する必要があります
。2。クラスのパブリックプロパティとメソッドをこれに追加する必要があります。3
。コンストラクターのthisは、インスタンス化されたものを指します。オブジェクト、およびメソッドポイントのthisこのメソッドの呼び出し元
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用类的注意事项</title>
</head>
<body>
<button type="button" class="bth">点击</button>
</body>
<script>
var that;
var _that;
class People {
constructor(name, age) {
that = this;
console.log(this)
this.name = name;
this.age = age;
this.bth = document.querySelector('button');
this.bth.onclick = this.sing;
}
sing() {
console.log(this) //里面的this指向bth按钮
console.log(that.name) //that指是constructor中的this
}
dance() {
_that = this;
console.log(this) //此时的this指向实例化对象 因为实例化对象调用了dance这个函数
}
}
// 创建类
var people = new People('尧子陌');
console.log(that === people)
people.dance()
console.log(_that === people)
</script>
</html>
