JS面向對象整理篇一——基礎概念衍生

JS面向對象

oop

  • 繼承：實例可以繼承A對象中的方法和屬性，減少代碼冗余

  • 封裝：對象把實現過程封裝在方法中，調用者可以不需了解過程直接調用

  • 多態：一種事物，可以有多種表現形式

構造函數

是對象的模版

function Person(){
    this.name = 'king';
    var age = 12;   // 私有屬性，是指針針對實例而言
    this.say = function() {
        console.log('hi~')
    }
}

對象

  • 普通對象: 沒有prototype，有proto
  • 函數對象： 只有函數有prototype屬性，所有的對象都有proto隱式屬性
  • 實例對象： var son = new Person();

創建對象方式

new運算符

MDN:語法new constructor[([arguments])]，創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例

  • 創建一個空的簡單JavaScript對象（即{})
  • 鏈接該對象（即設置該對象的構造函數）到另一個對象
  • 將步驟1新創建的對象作為this的上下文
  • 如果該函數沒有返回對象，則返回this

但實際上new具體做了什么操作

var son = new Person();

當這段代碼運行的時候，內部實際上執行的是：

// 創建一個空對象
var other = new Object();
// 將空對象的原型賦值為構造函數的原型
other.__proto__ = Person.prototype;
// 改變this指向
Person.call(other);

最后一步如何理解，當構造函數是否返回對象，可做如下嘗試

// 無返回對象時
function Person(name){
    this.name = name;
    this.age = 12;
}
Person.prototype.say = function(){
    console.log('say hi')
}
var son = new Person('king');
console.log(son.name);   // 'king'
console.log(son.say());  // 'say hi'

由此可以得出結論，new通過構造函數Person創造出來的實例son,可以訪問Person中的內部屬性，以及原型鏈上的方法，當對構造函數Person如下修改時

// 返回非對象
function Person(name){
    this.name = name;
    this.age = 12;
    return 1
}
Person.prototype.say = function(){
    console.log('say hi')
}
var son = new Person('king');
console.log(son.name);   // 'king'
console.log(son.say());  // 'say hi'

// 返回對象
function Person(name){
    this.name = name;
    this.age = 12;
    return {color: 'red'}
}
Person.prototype.say = function(){
    console.log('say hi')
}
var son = new Person('king');
console.log(son);   // '{color: "red"}'

綜上，可以很好理解MDN上關于new操作符的最后一步操作結果

Object.create()

語法：Object.create(proto[, propertiesObject])，創建一個新對象，使用現有的對象來提供新創建的對象的proto

內部實現方式

Object.create =  function (o) {
    // o參數是原型對象，不需要加.prototype
    var F = function () {};
    F.prototype = o;
    return new F();
};

Object.create = function (obj) {
    var B={};
    Object.setPrototypeOf(B,obj); // or  B.__proto__=obj;
    return B;  
};

MDN demo:
const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

console.log(me): // {}
me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

第二個參數

//該參數是一個屬性描述對象，它所描述的對象屬性，會添加到實例對象，作為該對象自身的屬性。
var obj = Object.create({}, {
  p1: {
    value: 123,
    enumerable: true,
    configurable: true,
    writable: true,
  },
  p2: {
    value: 'abc',
    enumerable: true,
    configurable: true,
    writable: true,
  }
});

// 等同于
var obj = Object.create({});
obj.p1 = 123;
obj.p2 = 'abc';

個人感覺跟new的用法非常相似，區別在于：

  • 字面量和new關鍵字創建的對象是Object的實例，原型指向Object.prototype，繼承內置對象Object

  • Object.create(proto, propertiesObject)創建的對象的原型取決于proto，proto為null，新對象是空對象，沒有原型，不繼承任何對象；proto為指定對象，新對象的原型指向指定對象，繼承指定對象。propertiesObject是可選參數，指定要添加到新對象上的可枚舉的屬性（即其自定義的屬性和方法，可用hasOwnProperty()獲取的，而不是原型對象上的）的描述符及相應的屬性名稱,如果不傳則實例對象為{}。

  • Object.create(o),如果o是一個構造函數，則采用這種方法來創建對像沒有意義

  • Object.create(o),如果o是一個字面量對象或實例對象，那么相當于是實現了對象的淺拷貝

封裝

把"屬性"（property）和"方法"（method），封裝到一個構造函數里，并且他的實例對象可以繼承他的所有屬性和方法，構建構造函數

prototype

解決所有實例指向prototype對象地址，而不需要每個實例對象重復生成構造內部屬性方法，這意味著，我們可以把那些不變的屬性和方法，直接定義在prototype對象上，被構造函數實例繼承

// before 
function Person(name){
    this.name = name;
    this.say = function(){
        console.log('say hi');
    }
}
//after
function Person(name){
    this.name = name;
    this.age = 12;
}
Person.prototype.say = function(){
    console.log('say hi')
}
var son = new Person('king');
var daughter = new Person('kim');

isPrototypeOf()用來判斷，某個proptotype對象和某個實例之間的關系; Person.prototype.isPrototypeOf(son) // true hasOwnProperty()判斷某一個屬性到底是本地屬性，還是繼承自prototype對象的屬性; son.hasOwnProperty("age") //false in運算符還可以用來遍歷某個對象的所有屬性,包含繼承的屬性 for(var prop in son)

原型，原型鏈

  • 內置對象：Object、Function都是js內置的函數, 類似的還有我們常用到的Array、RegExp、Date、Boolean、Number、String

  • js分為函數對象和普通對象，每個對象都有proto屬性，但是只有函數對象才有prototype屬性

  • 除了Object的原型對象（Object.prototype）的proto指向null，其他內置函數對象的原型對象和自定義構造函數的proto都指向Object.prototype, 因為原型對象本身是普通對象

function F(){};
F.prototype.__proto__ = Object.prototype;
Array.prtotype.__proto__ = Object.prototype;
Object.prototype.__proto__ = null;

F.__proto__ = Function.prototype;

var f = new F();
f.__proto__ = F.prototype;

繼承

  • 構造函數繼承
function Person(name){
    this.name = name
}
function Son(name){
    Person.call(this,name)
}
var obj = new Son('king');
console.log(obj.name)  // 'king'
  • prototype模式

組合模式

function Person(age){
    this.age = age
}
function Son(age){
    this.name = 'king';
    Person.call(this,age);
}
// 改變Son的prototype指向Person的實例，那么Son的實例就可以繼承Person
Son.prototype = new Person();
console.log(Son.prototype.constructor == Person.prototype.constructor)  //true
// 避免繼承鏈混亂，將Son.prototype對象的constructor改回Son
Son.prototype.constructor = Son;
var obj = new Son(12);
console.log(obj.age)  // 'king'
console.log(Person.prototype.isPrototypeOf(obj)) // true 同時繼承Person和Son

function Person(){

}
Person.prototype.age = 12;
function Son(name){
    this.name = name;
}
// Son.prototype指向Person.prototype
Son.prototype = Person.prototype;
console.log(Son.prototype.constructor == Person.prototype.constructor)  //true
// 然而也修改了Person.prototype.constructor為Son
Son.prototype.constructor = Son;
var obj = new Son('king');
console.log(obj.age)  // 'king'
console.log(Person.prototype.isPrototypeOf(obj)) // true 同時繼承Person和Son
Son.prototype.sex = 'male';
console.log(Person.prototype.sex);  // 'male'

差別：與前一種方法相比，這樣做的優點是效率比較高（不用執行和建立Person的實例了），比較省內存。缺點是 Person.prototype和Son.prototype現在指向了同一個對象，那么任何對Son.prototype的修改，都會反映到Person.prototype，再次改進如下，

利用空對象作為中介

function Person(){
    this.age = 12
}
Person.prototype.sex = 'male';
function Son(){
    this.name = 'king';
}
var F = function(){};
F.prototype = Person.prototype;
Son.prototype = new F();
Son.prototype.constructor = Son;
Son.uber = Person.prototype;
var obj = new Son();
console.log(obj.sex);  // 'male'

// 封裝一下
function extend(Child, Parent) {
　　var F = function(){};
　　F.prototype = Parent.prototype;
　　Child.prototype = new F();
　　Child.prototype.constructor = Child;
　　Child.uber = Parent.prototype;
}
extend(Son,Parent);
var obj = new Son();
console.log(obj.sex);  // 'male'
  • 拷貝繼承

利用 for...in 拷貝Person.prototype上的所有屬性給Son.prototype,Son的實例就相當于繼承了Person.prototype的所有屬性以及Son的屬性

  • 非構造函數繼承

1.json格式的發明人Douglas Crockford，提出了一個object()函數，即后來的內置函數Object.create()

function object(o){
    var F = function(){};
    F.prototype = o;
    return new F();
}
var child = {
    name: 'child'
}
var parent = {
    name: 'parent'
}
var child = object(parent)
console.log(child.name);   // 'parent'

2.淺拷貝

var parent = {
    area: ['A','B']
}
function extendCopy(o){
    var c = {};
    for(var i in o){
        c[i] = o[i]
    }
    return c;
}
var child = extendCopy(parent);
child.area.push('C');
console.log(parent.area);  // ['A','B','C']

現象：當父對象的屬性值為數組或者對象時，子對象改變那個屬性值，父對象也會隨之改變，因此，子對象只是獲得了內存地址，而不是真正的拷貝，extendCopy只能用作基本數據類型的拷貝，這也是早期jquery實現繼承的方式

3.深拷貝

var parent = {
    area: ['A','B']
}
　function deepCopy(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}
var child = deepCopy(parent);
child.area.push('C');
console.log(parent.area);  // ['A','B']
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
禁止轉載，如需轉載請通過簡信或評論聯系作者。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,527評論 6贊 544
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,687評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 178,640評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,957評論 1贊 318
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,682評論 6贊 413
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 56,011評論 1贊 329
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,009評論 3贊 449
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,183評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,714評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,435評論 3贊 359
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,665評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,148評論 5贊 365
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,838評論 3贊 350
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,627評論 2贊 380