簡介
本將會深入講解面向對象在javascript中的應用,並詳細介紹三種對象的生成方式:構造函數,原型鏈,類。
什麼是對象
雖然說程序員不缺對象,隨時隨地都可以new一個出來,但是在程序的世界中,對象到底是什麼呢?
對象是單個實物的抽象。
對象是一個容器,封裝了屬性(property)和方法(method)。
而面向對象是相對於面向過程來講的,面向對象方法,把相關的數據和方法組織爲一個整體來看待,從更高的層次來進行系統建模,更貼近事物的自然運行模式。
面向對象的好處就是可抽象,封裝和可重用性,同時提供了繼承和多態等非常有用的特性。
而隨着JS的發展,已經超越了最開始的腳本語言,尤其是nodejs的出現之後,更是極大的豐富了js的工作能力。
所以JS也需要進行對象化。
一般來說,在JS中構建對象有三種方式:
- 構造函數(constructor)
- 原型鏈(prototype)
- 類(class) ---ES6提供
接下來,我們一一來講解。
構造函數
構造函數是專門用來生成對象的函數。它提供模板,描述對象的基本結構。
一個構造函數,可以生成多個對象,這些對象都有相同的結構。構造函數的寫法就是一個普通的函數,但是有自己的特徵和用法.
var Book = function () {
this.name = 'www.flydean.com';
}
Book就是構造函數,它提供模板,用來生成實例對象。爲了與普通函數區別,構造函數名字的第一個字母通常大寫。
構造函數的特點
構造函數首先是一個函數,也就是說是function開頭的函數。其次函數體內部使用了this關鍵字,代表了所要生成的對象實例。
在使用構造函數的時候,必需用new命令,調用Book函數。
new命令的作用,就是執行構造函數,返回一個實例對象。
var Book = function () {
this.name = 'www.flydean.com';
}
var b1 = new Book();
console.log(b1.name);
上面的例子輸出結果:
www.flydean.com
如果我們忘了使用new,會發生什麼情況呢?
var Book = function () {
this.name = 'www.flydean.com';
}
var b2 = Book();
console.log(name);
console.log(b2.name);
第一個輸出會輸出www.flydean.com
而第二個則會報一個錯誤:
TypeError: Cannot read property 'name' of undefined
因爲這樣調用的this指向的是global,所以this.name變成了全局變量。
爲了避免這種忘記寫new的問題,可以在第一行加上use strict,在嚴格模式中,函數內部的this不能指向全局對象,默認等於undefined,導致不加new調用會報錯。
如果不想使用use strict,則可以在構造函數內部判斷是否使用new命令,如果發現沒有使用,則直接返回一個實例對象。
function Person(firstname,lastname){
if(!(this instanceof Person)){
return new Person(firstname,lastname);
}
this.firstname= firstname;
this.firstname = lastname;
}
console.log(Person("jack","ma").firstname);
console.log((new Person("jack","ma")).firstname);
new命令的原理
使用new命令時,它後面的函數調用就不是正常的調用,而是依次執行下面的步驟:
- 創建一個空對象,作爲將要返回的對象實例
- 將這個空對象的原型,指向構造函數的prototype屬性
- 將這個空對象賦值給函數內部的this關鍵字
- 開始執行構造函數內部的代碼
如果構造函數內部有return語句,而且return後面跟着一個對象,new命令會返回return語句指定的對象;否則,就會不管return語句,返回this對象。
var Book = function () {
this.name = 'www.flydean.com';
return {author:'flydean'};
}
console.log((new Book()).author);
函數內部可以使用new.target屬性。如果當前函數是new命令調用,new.target指向當前函數,否則爲undefined。
通過new.target我們也可以用來判斷對象是否通過new來創建:
function f(){
if(! new.target){
throw new Error('請使用new命令!');
}
}
f();
構造函數作爲模板,可以生成實例對象。但是,有時只能拿到實例對象,而該對象根本就不是由構造函數生成的,這時可以使用Object.create()方法,直接以某個實例對象作爲模板,生成一個新的實例對象。
var book2 = {
name : '三毛流浪記',
author : '三毛',
getName : function () {
console.log('book name is:' + this.name);
}
}
var book3 = Object.create(book2);
console.log(book3.name);
book3.getName();
prototype對象
構造函數有什麼缺點呢?構造函數的缺點就是會將構造函數內部的對象都複製一份:
function Book(){
this.name ='www.flydean.com';
this.getName =function (){
console.log('flydean');
}
}
var book1 = new Book();
var book2 = new Book();
console.log(book1.getName === book2.getName);
輸出結果是 false。說明每次new一個對象,對象中的方法也被拷貝了一份。而這並不是必須的。
JavaScript 的每個對象都繼承另一個對象,後者稱爲“原型”(prototype)對象。只有null除外,它沒有自己的原型對象。
原型對象上的所有屬性和方法,都能被派生對象共享。這就是 JavaScript 繼承機制的基本設計。
通過構造函數生成實例對象時,會自動爲實例對象分配原型對象。每一個構造函數都有一個prototype屬性,這個屬性就是實例對象的原型對象。
function Book(name){
this.name = name;
}
Book.prototype.author ='flydean';
var book1 = new Book();
var book2 = new Book();
console.log(book1.author);
console.log(book2.author);
上面例子中的author屬性會被Book的所有實例所繼承,Book的prototype對象,就是book1和book2的原型對象。
原型對象的屬性不是實例對象自身的屬性。只要修改原型對象,變動就立刻會體現在所有實例對象上。
由於原型本身也是對象,又有自己的原型,所以形成了一條原型鏈(prototype chain)。
如果一層層地上溯,所有對象的原型最終都可以上溯到Object.prototype,即Object構造函數的prototype屬性指向的那個對象。
Object.prototype對象有沒有它的原型呢?回答可以是有的,就是沒有任何屬性和方法的null對象,而null對象沒有自己的原型。
console.log(Object.getPrototypeOf(Object.prototype));
//null
prototype對象有一個constructor屬性,默認指向prototype對象所在的構造函數.
function Book(name){
this.name = name;
}
var book3 =new Book();
console.log(book3.constructor);
console.log(book3.constructor === Book.prototype.constructor);
console.log(book3.hasOwnProperty(constructor));
還是剛剛的book,book3.constructor就是function Book本身。它也等於Book.prototype.constructor。
constructor屬性的作用,是分辨原型對象到底屬於哪個構造函數。
因爲prototype是一個對象,所以對象可以被賦值,也就是說prototype可以被改變:
function A(){}
var a = new A();
console.log(a instanceof A);
function B(){}
A.prototype = B.prototype;
console.log(a instanceof A);
上面的例子中,我們修改了A.prototype,最後a instanceof A值是false。
爲了保證不會出現這樣錯誤匹配的問題,我們再構建prototype的時候,一定不要直接重寫整個的prototype,只需要修改其中的某個屬性就好:
//不要這樣寫
A.prototype ={
method1:function (){}
}
//比較好的寫法
A.prototype ={
constructor:A,
method1:function (){}
}
//更好的寫法
A.prototype.method1 = function (){}
Object的prototype操作
Object.getPrototypeOf
Object.getPrototypeOf方法返回一個對象的原型。這是獲取原型對象的標準方法.
//空對象的prototype是Object.prototype
console.log(Object.getPrototypeOf({}) === Object.prototype);
//function的prototype是Function.prototype
function f(){}
console.log(Object.getPrototypeOf(f) === Function.prototype);
function F(){this.name ='flydean'}
var f1 =new F();
console.log(Object.getPrototypeOf(f1) === F.prototype);
var f2 = new f();
console.log(Object.getPrototypeOf(f2) === f.prototype);
上面4個的輸出結果都是true。
Object.setPrototypeOf
Object.setPrototypeOf方法可以爲現有對象設置原型,返回一個新對象。
Object.setPrototypeOf方法接受兩個參數,第一個是現有對象,第二個是原型對象。
var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(b.name);
Object.prototype.isPrototypeOf()
對象實例的isPrototypeOf方法,用來判斷一個對象是否是另一個對象的原型.
var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(a.isPrototypeOf(b));
Object.prototype.proto
proto屬性(前後各兩個下劃線)可以改寫某個對象的原型對象。
還是剛纔的例子,這次我們使用proto來改寫對象的原型。
var a = {name: 'flydean'};
var c ={};
c.__proto__ = a;
console.log(Object.getPrototypeOf(c));
proto屬性只有瀏覽器才需要部署,其他環境可以沒有這個屬性,而且前後的兩根下劃線,表示它本質是一個內部屬性,不應該對使用者暴露。
因此,應該儘量少用這個屬性,而是用Object.getPrototypeof()(讀取)和Object.setPrototypeOf()(設置),進行原型對象的讀寫操作。
三種獲取原型對象的方法
綜上,我們有三種獲取原型對象的方法:
- obj.proto
- obj.constructor.prototype
- Object.getPrototypeOf(obj)
this對象
this總是返回一個對象,簡單說,就是返回屬性或方法“當前”所在的對象。
var book = {
name :'flydean',
getName : function (){
return '書名:'+ this.name;
}
}
console.log(book.getName());
//書名:flydean
這裏this的指向是可變的,我們看一個例子 :
var book = {
name :'flydean',
getName : function (){
return '書名:'+ this.name;
}
}
var car ={
name :'car'
}
car.getName = book.getName;
console.log(car.getName());
//書名:car
當 A 對象的方法被賦予 B 對象,該方法中的this就從指向 A 對象變成了指向 B 對象
上面的例子中,我們把book中的getName方法賦值給了car對象,this對象現在就指向了car。
如果某個方法位於多層對象的內部,這時this只是指向當前一層的對象,而不會繼承更上面的層。
var book1 = {
name :'flydean',
book2: {
getName : function (){
return '書名:'+ this.name;
}
}
}
console.log(book1.book2.getName());
//書名:undefined
上面的例子中,this是定義在對象中的函數中,如果是在函數中的函數中定義的this,代表什麼呢?
var book3 = {
name :'flydean',
book4: function(){
console.log('book4');
var getName = function (){
console.log(this); //Window
}();
}
}
book3.book4();
如果在函數中的函數中使用了this,那麼內層的this指向的是全局的window對象。
所以我們在使用的過程中要避免多層 this。由於this的指向是不確定的,所以切勿在函數中包含多層的this。
如果在全局環境使用this,它指的就是頂層對象window。
數組的map和foreach方法,允許提供一個函數作爲參數。這個函數內部不應該使用this。
var book5 ={
name : 'flydean',
author : ['max','jacken'],
f: function (){
this.author.forEach(function (item) {
console.log(this.name+' '+item);
})
}
}
book5.f();
//undefined max
//undefined jacken
foreach方法的回調函數中的this,其實是指向window對象,因此取不到o.v的值。原因跟上一段的多層this是一樣的,就是內層的this不指向外部,而指向頂層對象。
怎麼解決呢?我們使用一箇中間變量:
var book6 ={
name : 'flydean',
author : ['max','jacken'],
f: function (){
var that = this;
this.author.forEach(function (item) {
console.log(that.name+' '+item);
})
}
}
book6.f();
//flydean max
//flydean jacken
或者將this當作foreach方法的第二個參數,固定它的運行環境:
var book7 ={
name : 'flydean',
author : ['max','jacken'],
f: function (){
this.author.forEach(function (item) {
console.log(this.name+' '+item);
},this)
}
}
book7.f();
//flydean max
//flydean jacken
綁定this的方法
JavaScript提供了call、apply、bind這三個方法,來切換/固定this的指向.
call
函數實例的call方法,可以指定函數內部this的指向(即函數執行時所在的作用域),然後在所指定的作用域中,調用該函數.
var book = {};
var f = function () {
return this;
}
f() === this ; //true
f.call(book) === book; //true
上面例子中,如果直接調用f(),那麼返回的就是全局的window對象。如果傳入book對象,那麼返回的就是book對象。
call方法的參數,應該是一個對象。如果參數爲空、null和undefined,則默認傳入全局對象。
如果call方法的參數是一個原始值,那麼這個原始值會自動轉成對應的包裝對象,然後傳入call方法。
var f = function () {
return this;
}
console.log(f.call(100));
//[Number: 100]
call方法還可以接受多個參數.
func.call(thisValue,arg1,arg2, ...);
call的第一個參數就是this所要指向的那個對象,後面的參數則是函數調用時所需的參數。
call一般用在調用對象的原始方法:
var person = {};
person.hasOwnProperty('getName');//false
//覆蓋person的getName方法
person.getName = function(){
return true;
}
person.hasOwnProperty('getName');//true
Object.prototype.hasOwnProperty.call(person,'getName');//false
apply
apply方法的作用與call方法類似,也是改變this指向,然後再調用該函數。唯一的區別就是,它接收一個數組作爲函數執行時的參數.
func.apply(thisValue,[arg1,arg2,...])
bind
call和apply是改變this的指向,然後調用該函數,而bind方法用於將函數體內的this綁定到某個對象,然後返回一個新函數.
var d = new Date();
console.log(d.getTime()); //1600755862787
var getTime= d.getTime;
console.log(getTime());//TypeError: this is not a Date object.
上面的例子中,getTime方法裏面調用了this,如果直接把d.getTime賦值給getTime變量,那麼this將會指向全局的window對象,導致運行錯誤。
我們可以這樣修改:
var d = new Date();
console.log(d.getTime()); //1600755862787
var getTime2= d.getTime.bind(d);
console.log(getTime2());
bind比call方法和apply方法更進一步的是,除了綁定this以外,還可以綁定原函數的參數。
var add = function(x,y){
return x +this.m + y + this.n;
}
var addObj ={
m: 10,
n: 10
}
var newAdd = add.bind(addObj,2);
console.log(newAdd(3));//25
上面的例子中,bind將兩個參數的add方法,替換成了1個參數的add方法。
注意,bind每次調用都會返回一個新的函數,從而導致無法取消之前的綁定。
繼承
構造函數的繼承
構造函數的繼承第一步是在子類的構造函數中,調用父類的構造函數,讓子類實例具有父類實例的屬性。
然後讓子類的原型指向父類的原型,這樣子類就可以繼承父類原型。
function Person (){
this.name = 'person';
}
function Boy(){
Person.call(this);
this.title = 'boy';
}
Boy.prototype= Object.create(Person.prototype);
Boy.prototype.constructor=Boy;
Boy.prototype.getTitle=function (){console.log(this.title)};
var b =new Boy();
b.getTitle();
console.log(b);
~~
調用父類的構造函數是初始化實例對象的屬性。子類的原型指向父類的原型是爲了基礎父類的原型對象的屬性。
另外一種寫法是Boy.prototype等於一個父類實例:
~~~js
Boy.prototype = new Person();
上面這種寫法也有繼承的效果,但是子類會具有父類實例的方法。有時,這可能不是我們需要的,所以不推薦使用這種寫法.
JavaScript 不提供多重繼承功能,即不允許一個對象同時繼承多個對象。但是,可以通過變通方法,實現這個功能:
function Person1 (){
this.name = 'person';
}
function Person2 (){
this.sex = '男';
}
function Boy(){
Person1.call(this);
Person2.call(this);
this.title = 'boy';
}
//繼承Person1
Boy.prototype= Object.create(Person1.prototype);
//繼承鏈加上Person2
Object.assign(Boy.prototype,Person2.prototype);
Boy.prototype.constructor=Boy;
Boy.prototype.getTitle=function (){console.log(this.title)};
var b =new Boy();
b.getTitle();
console.log(b);
//Boy { name: 'person', sex: '男', title: 'boy' }
class
ES6 的class可以看作只是一個語法糖,它的絕大部分功能,ES5 都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已.
class Person {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
toString(){
return this.name + ' '+ this.sex;
}
}
構造函數的prototype屬性,在ES6 的“類”上面繼續存在。事實上,類的所有方法都定義在類的prototype屬性上面。
上面的類等同於:
Person.prototype = {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
toString(){
return this.name + ' '+ this.sex;
}
}
表達式屬性名
class還支持動態的表達式屬性名:
let methodName = 'getName';
class Person {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
toString(){
return this.name + ' '+ this.sex;
}
[methodName](){
return this.name;
}
}
靜態方法
類相當於實例的原型,所有在類中定義的方法,都會被實例繼承。如果在一個方法前,加上static關鍵字,就表示該方法不會被實例繼承,而是直接通過類來調用,這就稱爲“靜態方法”。
class Person {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
static getSex(){
return '男';
}
}
console.log(Person.getSex()); //男
let p = new Person();
console.log(p.getSex());//TypeError: p.getSex is not a function
靜態屬性
靜態屬性指的是 Class 本身的屬性,即Class.propName,而不是定義在實例對象(this)上的屬性.
class Person {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
}
Person.address ='address';
console.log(Person.address);
目前,只有這種寫法可行,因爲 ES6 明確規定,Class 內部只有靜態方法,沒有靜態屬性.
class的繼承
class的繼承一般使用extends關鍵字:
class Boy extends Person{
constructor(name,sex,address) {
super(name,sex); //調用父類的構造函數
this.address =address;
}
toString() {
return super.toString();//調用父類的方法
}
}
在子類的構造函數中,只有調用super之後,纔可以使用this關鍵字,否則會報錯。這是因爲子類實例的構建,是基於對父類實例加工,只有super方法才能返回父類實例。
super作爲函數調用時,代表父類的構造函數。ES6 要求,子類的構造函數必須執行一次super函數。
super作爲對象時,在普通方法中,指向父類的原型對象;在靜態方法中,指向父類。
上面的例子,我們在子類Boy中的toString普通方法中,調用了super.toString(),之前我們也講了,類的所有方法都定義在類的prototype屬性上面。所以super.toString就是Person中定義的toString方法。
由於super指向父類的原型對象,所以定義在父類實例上的方法或屬性,是無法通過super調用的。
定義在父類實例上的方法或屬性就是指在constructor中定義的方法或者屬性。
Person類,在constructor中定義了name屬性。我們看一下在Boy中的普通方法中訪問會有什麼問題:
class Boy extends Person{
constructor(name,sex,address) {
super(name,sex); //調用父類的構造函數
console.log(super.name); //undefined
console.log(this.name); //hanmeimei
this.address =address;
}
toString() {
return super.toString();//調用父類的方法
}
getName(){
console.log(super.name); //undefined
console.log(this.name); //hanmeimei
}
}
var b =new Boy('hanmeimei','女','北京');
b.getName();
總結
JS中的面向對象主要有構造函數,原型鏈,類三種方式,希望大家能夠喜歡。
本文作者:flydean程序那些事
本文鏈接:http://www.flydean.com/object-oriented-js/
本文來源:flydean的博客
歡迎關注我的公衆號:「程序那些事」最通俗的解讀,最深刻的乾貨,最簡潔的教程,衆多你不知道的小技巧等你來發現!