編程范式
1：命令式編程
命令機器去做事情，這樣不管你想要的是什么，他都會按照你的命令實作。
1：面向程序
分析解決問題所需要的步驟，然后一步步實作。
2：面向物件
面向物件是把構成問題事務分解成各個物件，建立物件的目的不是為了完成一個步驟，而是為了描述解決問題中華步驟的行為。
**注：**面向物件并不是完全脫離面向程序的，也就是說，就算好似采用面向物件的思想，里面也會有面向程序的步驟，只不過通過面向物件可以給我們節省了很多步驟，因為這些步驟通過物件本身實作了。
特征
#####1：封裝
內部運作隱藏在物件里，只有基本功能暴露給最終用戶。
#####2：繼承
新物件繼承一個現有物件的特性，然會添加一些新的特效。
#####2：多型
不同的物件可以共享相同的方法。還能夠用一些特定的方法覆寫原有的方法。
類
類是物件的一種概括，而物件是類的一種具體實作。
例：
class Person{
public $name;
public $gender;
public $age;
function __construct($name, $gender, $age){
$this->name = $name;
$this->gender = $gender;
$this->age = $age;
}
2：宣告式編程
告訴機器你想要的是什么，讓機器想出如何去做。
1：領域專用語言
DSL：主要指一些對應專門領域的高層編程語言，和通用編程語言的概念相對。
2：函式編程
是一種編程模型，將計算機運算看作是數學中函式的計算。在函式式編程中，變數只是一個名稱，而不是存盤單元。
####原型物件
在js中，每一個物件，都有一個原型物件。而原型物件上面也有一個自己的原型物件，一層一層向上找，最侄訓到達null。
####物件分類
1：原生物件
內置物件
js中本身所內置的。
自定義物件
開發人員自定義的物件
2：宿主物件
基于物件創建新物件
const person = {
arms: 2,
legs: 2,
walk() { console.log('walking'); }
}
const xiejie = Object.create(person); console.log(xiejie.arms); // 2
console.log(xiejie.legs); // 2 xiejie.walk(); // walking
console.log(xiejie.__proto__ === person); // true
原型相關方法
1： prototype 和_proto_ c
prototype是建構式上面的一個屬性，指向一個物件，這個物件是該建構式實體化出來的物件的原型物件。實體化出來的物件可以通過_proto_來找到自己的原想物件。
const arr = [1,2,3,4,5]; console.log(Array.prototype); console.log(arr.__proto__);
console.log(Array.prototype === arr.__proto__);
2： Object.getPrototypeOf()方法
查找原型物件
let arr = [1,2,3,4,5] console.log(Object.getPrototypeOf(arr)); // []
console.log(arr.__proto__); // []
console.log(Object.getPrototypeOf(arr) === arr.__proto__); // true
#####3：constructor屬性
查物件建構式
const arr = [1,2,3,4,5]; console.log(arr.constructor); // [Function: Array]
4.instanceof運算子
判斷一個物件是否是一個建構式的實體。回傳true或false。
const arr = [1,2,3,4,5]; console.log(arr instanceof Array); // true
console.log(arr instanceof Number); // false
isPrototypeOf() 方法
回傳一個布林值，檢測一個物件是否是一個實體物件的原型物件。
hasOwnProperty()
判斷一個屬性是定義在對想本身上面還是從原型物件上面繼承而來。回傳布林值。
建構式
1.建構式創建物件
使用函式來模擬其他面向物件語言中的類。
用于實列化物件的函式，我們將其稱之為建構式。
咧：
const Computer = function(name,price){
this.name = name;
this.price = price;
}
Computer.prototype.showSth = function(){
console.log(`這是一臺{this.name}電腦`);
}
當使用new運算子呼叫函式時，該函式總會回傳一個物件，通常情況下，建構式里面的this就指向回傳這個物件。
咧：
const Computer = function(name,price){
this.name = name; this.price = price;
}
Computer.prototype.showSth = function(){
console.log(this); // 列印出this所指向的物件
console.log(`這是一臺{this.name}電腦`);
}
const apple = new Computer("蘋果",12000);
console.log(apple.name);// 蘋果
console.log(apple.price);// 12000
apple.showSth();// Computer { name: '蘋果 ', price: 12000 } 這是一臺蘋果電腦
const asus = new Computer("華碩",5000);
console.log(asus.name);// 華碩
console.log(asus.price);// 5000
asus.showSth();// Computer { name: ' 華碩', price: 5000 } 這是一臺華碩電腦
2.建構式顯式回傳內容
建構式顯式回傳object型別物件的區別
咧：
const Computer = function (name, price) {
this.name = name;
this.price = price;
}
Computer.prototype.showSth = function () {
console.log(this); // 列印出this所指向的物件
}
const apple = new Computer("蘋果", 12000);
console.log(apple.name); // 蘋果
apple.showSth(); // Computer { name: ' 蘋果 ', price: 12000 }
3.ECMAScript 6中類的宣告
使用class關鍵字來宣告一個類來，然后從類里面實列化物件
咧：
class Computer {
// 構造器
constructor(name, price) {
this.name = name;
this.price = price; }
//原型方法
showSth() {
console.log(`這是一臺${this.name}電腦`);
}
} const apple = new Computer("蘋果", 12000);
console.log(apple.name); // 蘋果
console.log(apple.price); // 12000
apple.showSth(); // 這是一臺蘋果電腦
4.靜態方法
又被稱為類方法，就是通過類來呼叫的方法。靜態方法的好處在于不需要實體化物件，直接通過類就能夠進行方法的呼叫。
咧：
class Computer {
// 構造器
constructor(name, price) {
this.name = name;
this.price = price; }
//原型方法
showSth() {
console.log(`這是一臺${this.name}電腦`);
}
// 靜態方法
static comStruct() {
console.log("電腦由顯示幕，主機，鍵鼠組成");
}
}
Computer.comStruct(); //電腦由顯示幕，主機，鍵鼠組成
如果書寫的式建構式，也有辦法來模擬靜態方法，直接將方法掛在建構式上。
咧：
const Computer = function (name, price) {
this.name = name;
this.price = price;
}
Computer.prototype.showSth = function () {
console.log(`這是一臺${this.name}電腦`);
}
//靜態方法直接通過 Computer這個建構式來呼叫
Computer.comStruct = function () {
console.log("??????????????");
}
Computer.comStruct(); // ??????????????
面對物件3大特征
1.封裝
指隱藏內部的細節，不暴露在外面。目的就是將資訊隱藏。
const Computer = function(name,price){
this.name = name;
this.price = price;
this.sayPrice = function () {
console.log(`價格${_price}`);
}
}
Computer.prototype.showSth = function () {
console.log(`這是一臺${this.name}電腦`);
}
const apple = new Computer("蘋果", 12000);
apple.sayPrice(); // 價格12000
2.繼承
1.繼承基本介紹
面向物件里面的繼承是指一個子類去繼承一個父類。子類繼承父類之后，父類所有的屬性和方法都自動擁有了
好處：代碼復用。
缺點：1)會出現“大猩猩與香蕉”問題
2)也會遇到“菱形繼承”(只會在多繼承里面才會出現)
2.物件冒充
物件冒充，就是用父類（建構式）去充當子類的屬性
咧：
const Person = function (name, age) {
this.name = name;
this.age = age;
}
const Student = function (name, age, gender, score) {
this.temp = Person; // 將Person建構式Student的一個屬性
this.temp(name, age); // 給Person建構式里面的this.name以及this.age賦值
delete this.temp; // this.temp 已經無用，將其洗掉
this.gender = gender;
this.score = score;
}
const xiejie = new Student("哈哈", 18, "男", 100); console.log(xiejie.name); // 哈哈
console.log(xiejie.age); // 18
console.log(xiejie.gender); //男
console.log(xiejie.score); // 100
使用物件冒充來實作繼承也有一個缺陷，那就是無法繼承到原型物件上面的屬性。
咧：
const Person = function (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.test = "this is a test";
const Student = function (name, age, gender, score) {
this.temp = Person; // 將Person建構式Student的一個屬性
this.temp(name, age); // 給Person建構式里面的this.name以及this.age賦值
delete this.temp; // this.temp 已經無用，將其洗掉
this.gender = gender;
this.score = score;
}
const xiejie = new Student("哈哈", 18, "男", 100); console.log(xiejie.name); // 哈哈
console.log(xiejie.age); // 18
console.log(xiejie.gender); //男
console.log(xiejie.score); // 100
console.log(xiejie.test); // undefined
3.方法借用模式
call()和apply()方法
Function.apply(obj?args)方法能接收兩個函式
obj：這個物件將代替Function類里this物件
args：這個是陣列，它將作為引數傳給Function(args->arguments)
Function.call(obj?[param1[?param2[?..[?paramN]]]])
obj:這個物件將代替Function類里this物件
params：這個是一個引數串列
call()實作繼承示列：
const Person = function (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.test = "this is a test";
const Student = function (name, age, gender, score) {
// 將Person建構式應用到this 里面
// this 后面是引數
Person.call(this, name, age);
this.gender = gender;
this.score = score;
}
const xiejie = new Student("哈哈", 18, "男", 100); console.log(xiejie.name); // 哈哈
console.log(xiejie.age); // 18
console.log(xiejie.gender); // 男
console.log(xiejie.score); // 100
console.log(xiejie.test); // undefined
apply()實作繼承示列：
const Person = function (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.test = "this is a test";
const Student = function (name, age, gender, score) {
// 將Person建構式應用到this 里面
// this 后面是引數
## Person.apply(this,[name,age]);
this.gender = gender;
this.score = score;
}
const xiejie = new Student("哈哈", 18, "男", 100); console.log(xiejie.name); // 哈哈
console.log(xiejie.age); // 18
console.log(xiejie.gender); // 男
console.log(xiejie.score); // 100
console.log(xiejie.test); // undefined
4.原型繼承
這種方式的核心思路就是改變建構式的prototype的指向，使其指定到我們想要繼承的類的實列物件上面
咧：
const Person = function (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.test = "this is a test";
const Student = function (name, age, gender, score) {
// 將Person建構式應用到this里面
// this后面是引數
Person.apply(this, [name, age]);
this.gender = gender;
this.score = score;
}
Student.prototype = new Person(); // 改變Student建構式的原型物件
const xiejie = new Student("哈哈", 18, "男", 100); console.log(xiejie.name); //哈哈
console.log(xiejie.age); // 18
console.log(xiejie.gender); // 男
console.log(xiejie.score); // 100
console.log(xiejie.test); // this is a test
5.ECMAScript 6 繼承方式
可以使用extends關鍵字來實作繼承
咧：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName() {
console.log(`my name is ${this.name}`);
}
}
class Student extends Person {
constructor(name, age, gender, score) {
super(name, age); // super代表訪問父類的建構式
this.gender = gender;
this.score = score;
}
learn() {
console.log("I\'m learning");
}
}
const xiejie = new Student("xiejie", 18, "male", 100); console.log(xiejie.name); // xiejie
console.log(xiejie.age); // 18
console.log(xiejie.gender); // male
console.log(xiejie.score); // 100
xiejie.sayName(); // my name is xiejie
xiejie.learn(); // I'm learning
uj5u.com熱心網友回復：
筆記類知識， 請發到個人博客， 謝謝轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/100639.html
標籤：基礎類
上一篇：面向物件總結