JavaScript 面向?qū)ο蟪绦蛟O(shè)計詳解【類的創(chuàng)建、實例對象、構(gòu)造函數(shù)、原型等】
更新時間：2020年05月12日 11:24:30 作者：alogy
這篇文章主要介紹了JavaScript 面向?qū)ο蟪绦蛟O(shè)計,結(jié)合具體實例形式詳細分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計中類的創(chuàng)建、實例對象、構(gòu)造函數(shù)、原型等相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下
本文實例講述了JavaScript 面向?qū)ο蟪绦蛟O(shè)計。分享給大家供大家參考，具體如下：
類的創(chuàng)建于實例對象
工廠模型創(chuàng)建對象
function CreatePerson ( name,sex,age ) {
var obj = new Object();
obj.name = name;
obj.sex = sex;
obj.age = age;
obj.sayName = function () {
console.log( this.name );
}
return obj;
}
var p1 = CreatePerson('zf','女',22);
p1.sayName(); //zf
console.log( p1.name ); //zf
構(gòu)造函數(shù)式
//函數(shù)的第一個字母大寫(類的模板)
function Person ( name,age,sex ) {
this.name = name;
this.age = age;
this.sex =sex;
this.sayName = function () {
alert(this.name);
}
}
//構(gòu)造一個對象， 使用new關(guān)鍵字， 傳遞參數(shù)， 執(zhí)行模板代碼， 返回對象。
var p1 = new Person('zf',20,'女'); //類的概念：根據(jù)模板創(chuàng)建出不同的實例對象
console.log( p1.name );
p1.sayName();
創(chuàng)建類的實例：
-
當作構(gòu)造函數(shù)去使用
var p1 = new Person('a1',20);
-
作為普通函數(shù)去調(diào)用
Person('a2',20); //在全局環(huán)境中定義屬性并賦值， 直接定義在window上。
-
在另個一對象的作用域中調(diào)用
var o = new Object();
Person.call(o,'a3',23);
Object每個實例都會具有的屬性和方法：
Constructor: 保存著用于創(chuàng)建當前對象的函數(shù)。（構(gòu)造函數(shù)）
hasOwnProperty(propertyName):用于檢測給定的屬性在當前對象實例中(而不是原型中)是否存在。
isPrototypeOf(Object): 用于檢查傳入的對象是否是另外一個對象的原型。
propertyIsEnumerable(propertyName):用于檢查給定的屬性是否能夠使用for-in語句來枚舉。
toLocaleString()：返回對象的字符串表示。該字符串與執(zhí)行環(huán)境的地區(qū)對應(yīng).
toString():返回對象的字符串表示。
valueOf():返回對象的字符串、數(shù)值或布爾表示。
判斷一個對象是不是另一個對象的實例，通常使用的是 instanceof. 比較少使用constructor。
原型
創(chuàng)建每一個函數(shù)的時候，都有一個prototype屬性. 這個是屬性，是一個指針。而這個對象總是指向一個對象。
這個對象 的用途就是將特定的屬性和方法包含在內(nèi)，是一個實例對象， 起到了一個所有實例所共享的作用。
屏蔽了，構(gòu)造函數(shù)的缺點，new 一個對象，就把構(gòu)造函數(shù)內(nèi)的方法實例化一次。
function Person () {
}
var obj = Person.prototype;
console.log( obj ); //Person.prototype 就是一個對象
//Person.prototype 內(nèi)部存在指針，指針指向一個對象。 這個對象稱之為：原型對象。原型對象，被所有的實例對象所共享。
console.log( obj.constructor ); //function Person(){} //obj這個對象的構(gòu)造器就是 Person
原型圖例：
console.log(Person.prototype) 的結(jié)果：
常用方法
Object.getPrototypeOf()
根據(jù)實例對象獲得原型對象
每次代碼讀取一個對象的屬性的時候：首先會進行一次搜索，搜索實例對象里，看看是否存在，如果沒有，再去實例所對的原型中尋找屬性.如果有則返回，如果兩次都沒有則返回undefined
function Person () {
}
Person.prototype.name = 'z1';
Person.prototype.age = 20;
Person.prototype.sayName = function () {
console.log( '我是原型對象方法' );
}
var p1 = new Person();
console.log( p1.name ); //z1
console.log( Object.getPrototypeOf(p1) );
console.log( Object.getPrototypeOf(p1) == Person.prototype ); //true
hasOwnProperty()
判斷是否是 實例對象自己的屬性
function Person () {
}
Person.prototype.name = 'z1';
Person.prototype.age = 20;
Person.prototype.sayName = function () {
console.log( '我是原型對象方法' );
}
// 判斷一個對象屬性 是屬于 原型屬性 還是屬性 實例屬性
var p3 = new Person();
console.log( p3.name ); //zf 是原型上的
//hasOwnProperty() 是否是 實例對象自己的屬性
console.log( p3.hasOwnProperty('name') ); //false
in 操作符
無論是 原型的屬性， 還是實例對象的屬性， 都區(qū)分不開。 如果存在，返回true
function Person () {
}
Person.prototype.name = 'z1';
Person.prototype.age = 20;
Person.prototype.sayName = function () {
console.log( '我是原型對象方法' );
}
//判斷屬性是否存在 實例對象 和 原型對象中.
var p1 = new Person();
console.log('name' in p1); //true //表示，name的屬性到底在不在p1的屬性中 true
var p2 = new Person();
p1.name = 'zzz';
console.log('name' in p1); //true
判斷一個屬性是否在原型中
function Person () {
}
Person.prototype.name = 'z1';
Person.prototype.age = 20;
Person.prototype.sayName = function () {
console.log( '我是原型對象方法' );
}
//判斷屬性是否存在 實例對象 和 原型對象中.
var p1 = new Person();
p1.name = '123';
//在原型對象中，是否存在這個值
//@obj 當前對象
//@判斷的屬性
function hasPrototypeProtoperty ( obj,attrName ) {
return !obj.hasOwnProperty(attrName) && (attrName in obj);
}
console.log( hasPrototypeProtoperty(p1,'name') ); //false
Object.keys()
function Person () {
}
Person.prototype.name = 'z1';
Person.prototype.age = 20;
Person.prototype.sayName = function () {
console.log( '我是原型對象方法' );
}
//ECMA5新特性 Object.keys();
//拿到當前對象中的所有keys， 返回一個數(shù)組
var p1 = new Person();
p1.name = 'zz';
p1.age = 20;
var attr = Object.keys(p1);
console.log( attr ); //["name", "age"]
var attr2 = Object.keys(p1.__proto__);
console.log( attr2 ); //["name", "age", "sayName"]
var attr3 = Object.keys(Person.prototype);
console.log( attr3 ); //["name", "age", "sayName"]
Object.getOwnPropertyNames()
function Person () {
}
Person.prototype.name = 'z1';
Person.prototype.age = 20;
Person.prototype.sayName = function () {
console.log( '我是原型對象方法' );
}
var p1 = new Person();
p1.name = 'zz';
p1.age = 20;
//ECMA5
//constructor屬性,是無法被枚舉的. 正常的for-in循環(huán)是無法枚舉. [eable = false];
//Object.getOwnPropertyNames(); //枚舉對象所有的屬性：不管該內(nèi)部屬性能夠被枚舉.
var attr4 = Object.getOwnPropertyNames(Person.prototype); //["constructor", "name", "age", "sayName"]
console.log( attr3 );
isPrototypeOf()
判斷原型的方法
原型對象.isPrototypeOf(new instance);
實現(xiàn)each方法
原型的另外一個作用就是擴展對象中的屬性和方法
//遍歷多維數(shù)組
var arr = [1,2,4,5,[455,[456,[345345]]]];
Array.prototype.each = function ( cb ) {
try {
//計數(shù)器
this.i || (this.i = 0);
//核心代碼
if ( this.length > 0 && cb.constructor === Function ) {
while ( this.i < this.length ) { //計數(shù)器 大于 數(shù)組長度跳出
//獲得每一項值
var e = this[this.i];
//判斷是否是 數(shù)組
if ( e && e.constructor === Array ) {
//遞歸
e.each(cb);
} else {
cb.call(null,e);
}
this.i++;
}
//使用完之后，釋放變量
this.i = null;
}
} catch (e) {
//do someting
}
return this;
};
arr.each(function( val ){
console.log(val);
});
簡單原型
直接通過對象字面量來重寫整個原型對象（這種方法會改變原型對象的構(gòu)造器[改變?yōu)镺bject]）
//簡單原型
function Person () {
}
Person.prototype = {
constructor: Person, //原型的構(gòu)造器改變
name: 'zz',
age: 20,
say: function () {
console.log( this.age );
}
}
var p1 = new Person();
console.log( p1.name );
p1.say();
存在的問題，constructor屬性是無法被枚舉的。加在原型對象上，可以被枚舉，被枚舉。不符合要求。
ECMA5中的Object.defineProperty()方法可以為原型對象重新加入構(gòu)造器。constructor問題可以被避免。
//3個參數(shù)， 參數(shù)1：重新設(shè)置構(gòu)造的對象 （給什么對象設(shè)置） 參數(shù)2：設(shè)置什么屬性 參數(shù)3：options配置項 (要怎么去設(shè)置)
Object.defineProperty(Person.prototype,'constructor',{
enumerable: false, //是否是 能夠 被枚舉
value: Person //值 構(gòu)造器的 引用
});
原型的動態(tài)特性
注意原型和創(chuàng)建實例的前后順序
function Person () {
}
var p1 = new Person(); // {}
Person.prototype = {
constructor: Person,
name: 'zf',
age: 20,
say: function () {
console.log('原型');
}
}
//先把原型對象寫好，然后再實例化。
//p1.say(); //error 因為 原型對象里面沒有任何屬性和方法
var p2 = new Person();
p2.say();
//注意 簡單原型使用的順序(實例對象必須在原型對象之后創(chuàng)建)
原型對象的常用開發(fā)模式
組合構(gòu)造函數(shù)式和原型模式
function Person( name,age,firends ) {
this.name = name;
this.age = age;
this.firends = firends;
}
Person.prototype = {
constructor: Person,
sayName: function () {
console.log( this.name );
}
}
var p1 = new Person('zz',20,['zf']);
var p2 = new Person('zx',22,['z1']);
console.log( p1.firends ); //['zf']
console.log( p2.firends ); //['z1']
動態(tài)原型模式
就是把信息都封裝到函數(shù)中，這樣體現(xiàn)了封裝的概念。
//動態(tài)原型模式：（讓你的代碼 都封裝到一起）
function Person( name,age,firends ) {
this.name = name;
this.age = age;
this.firends = firends;
//動態(tài)原型方法
if ( typeof this.sayName !== 'function' ) {
Person.prototype.sayName = function () {
console.log(this.name);
}
}
}
穩(wěn)妥構(gòu)造函數(shù)式
穩(wěn)妥模式就是沒有公共屬性，而且其他方法也不引用this對象，穩(wěn)妥模式最適合在安全的環(huán)境中使用。如果程序?qū)τ诎踩砸蠛芨?，那么非常適合這種模式。
也不能使用new關(guān)鍵字。
//穩(wěn)妥構(gòu)造函數(shù)式 durable object (穩(wěn)妥對象)
//1，沒有公共的屬性
//2,不能使用this對象
function Person ( name,age ) {
//創(chuàng)建一個要返回的對象。 利用工廠模式思維。
var obj = new Object();
//可以定義一下是有的變量和函數(shù) private
var name = name || 'zf';
// var sex = '女';
// var sayName = function () {
// }
//添加一個對外的方法
obj.sayName = function () {
console.log(name);
}
return obj;
}
var p1 = Person('xixi',20);
p1.sayName();
深入原型繼承的概念
如果讓原型對象等于另一個類型的實例，結(jié)果會怎么樣呢？顯然此時的原型對象將包含一個指向另一個原型的指針，相應(yīng)的另一個原型中也包含著一個指向另一個構(gòu)造函數(shù)的指針。
原型鏈: 利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。
構(gòu)造函數(shù) 原型對象 實例對象
-
構(gòu)造函數(shù).prototype = 原型對象
-
原型對象.constructor = 構(gòu)造函數(shù)
-
實例對象.__proto__ = 原型對象
-
原型對象.isPrototypeOf(實例對象)
-
構(gòu)造函數(shù) 實例對象 (類和實例)
isPrototypeOf(); //判斷是否 一個對象的 原型
//父類的構(gòu)造函數(shù) Sup
function Sup ( name ) {
this.name = name;
}
//父類的原型對象
Sup.prototype = {
constructor: Sup,
sayName: function () {
console.log(this.name);
}
}
//子類的構(gòu)造函數(shù) Sub
function Sub ( age ) {
this.age = age;
}
//如果子類的原型對象 等于 父類的 實例
//1, 顯然此時的原型對象將包含一個指向另一個原型的指針
//2, 相應(yīng)的另一個原型中也包含著一個指向另一個構(gòu)造函數(shù)的指針。
// 實例對象.__proto__ = 原型對象
// Sup的實例對象 和 Sup的原型對象 有一個關(guān)系
Sub.prototype = new Sup('zf');
// console.log( Sub.prototype.constructor ); //function Sup () {}
//
// console.log( Sub.prototype.__proto__ ); //Sup 的 原型對象
var sub1 = new Sub(20);
console.log( sub1.name ); //zf
sub1.sayName(); //zf
原型鏈繼承映射圖
繼承的三種方式
原型繼承
//原型繼承的特點:
//即繼承了父類的模板，又繼承了父類的原型對象。 (全方位的繼承)
//父類
function Person ( name,age ) {
this.name = name;
this.age = age;
}
Person.prototype.id = 10;
//子類
function Boy ( sex ) {
this.sex = sex;
}
//原型繼承
Boy.prototype = new Person('zz');
var b = new Boy();
console.log( b.name ); //zz
console.log( b.id ); //10
類繼承
類繼承 （只繼承模板） 不繼承原型對象 （借用構(gòu)造函數(shù)的方式繼承）
//父類
function Person ( name,age ) {
this.name = name;
this.age = age;
}
Person.prototype.id = 10;
//子類
function Boy ( name,age,sex ) {
//類繼承
Person.call(this,name,age);
this.sex = sex;
}
var b = new Boy('zf',20,'女');
console.log( b.name ); //zf
console.log( b.age ); //20
console.log( b.sex ); //女
console.log( b.id ); //父類的原型對象并沒有繼承過來.
混合繼承
原型繼承+類繼承
//父類 (關(guān)聯(lián)父類和子類的關(guān)系)
function Person ( name,age ) {
this.name = name;
this.age = age;
}
Person.prototype.id = 10;
Person.prototype.sayName = function () {
console.log( this.name );
}
//子類
function Boy ( name,age,sex ) {
//1 類繼承
Person.call(this,name,age); //繼承父類的模板
this.sex = sex;
}
//2 原型繼承
//父類的實例 和 父類的 原型對象的關(guān)系.
Boy.prototype = new Person(); //繼承父類的原型對象
var b = new Boy('z1',20,'女');
console.log( b.name );//z1
console.log( b.sex ); //女
console.log( b.id ); //10
b.sayName(); //z1
ExtJs底層繼承方式
模擬ExtJs底層繼承一部分代碼
//ExtJs 繼承
//2件事： 繼承了1次父類的模板，繼承了一次父類的原型對象
function Person ( name,age ) {
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
sayHello: function () {
console.log('hello world!');
}
}
function Boy ( name,age,sex ) {
//call 綁定父類的模板函數(shù) 實現(xiàn) 借用構(gòu)造函數(shù)繼承 只復(fù)制了父類的模板
// Person.call(this,name,age);
Boy.superClass.constructor.call(this,name,age);
this.sex = sex;
}
//原型繼承的方式： 即繼承了父類的模板，又繼承了父類的原型對象。
// Boy.prototype = new Person();
//只繼承 父類的原型對象
extend(Boy,Person); // 目的 只繼承 父類的原型對象 , 需要那兩個類產(chǎn)生關(guān)聯(lián)關(guān)系.
//給子類加了一個原型對象的方法。
Boy.prototype.sayHello = function () {
console.log('hi,js');
}
var b = new Boy('zf',20,'男');
console.log( b.name );
console.log( b.sex );
b.sayHello();
Boy.superClass.sayHello.call(b);
//extend方法
//sub子類， sup 父類
function extend ( sub,sup ) {
//目的, 實現(xiàn)只繼承 父類的原型對象。 從原型對象入手
//1，創(chuàng)建一個空函數(shù)， 目的：空函數(shù)進行中轉(zhuǎn)
var F = new Function(); // 用一個空函數(shù)進行中轉(zhuǎn)。
// 把父類的模板屏蔽掉， 父類的原型取到。
F.prototype = sup.prototype; //2實現(xiàn)空函數(shù)的原型對象 和 超類的原型對象轉(zhuǎn)換
sub.prototype = new F(); //3原型繼承
//做善后處理。 還原構(gòu)造器 ，
sub.prototype.constructor = sub; //4 ，還原子類的構(gòu)造器
// 保存一下父類的原型對象 // 因為 ①方便解耦， 減低耦合性 ② 可以方便獲得父類的原型對象
sub.superClass = sup.prototype; //5 ，保存父類的原型對象。 //自定義一個子類的靜態(tài)屬性 ， 接受父類的原型對象。
//判斷父類的原型對象的構(gòu)造器， （防止簡單原型中給更改為 Object）
if ( sup.prototype.constructor == Object.prototype.constructor ) {
sup.prototype.constructor = sup; //還原父類原型對象的構(gòu)造器
}
}
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
js中console在一行內(nèi)打印字符串和對象的方法
這篇文章主要介紹了js中console在一行內(nèi)打印字符串和對象的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
微信小程序?qū)崿F(xiàn)虎年春節(jié)頭像制作
春節(jié)來臨之際，看到有網(wǎng)友分享了網(wǎng)頁版的虎年頭像制作工具。本文將為大家介紹一個虎年春節(jié)頭像制作小程序，文中的示例代碼講解詳細，需要的可以參考一下2022-02-02
微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時具有出色的使用體驗,下面這篇文章主要給大家介紹了關(guān)于微信小程序自定義tabbar問題的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁同時進行多個倒計時功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
下面小編就為大家?guī)硪黄猨s控制li的隱藏和顯示實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細介紹了JavaScript變量作用域，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了js如何獲取ajax的返回值,需要的朋友可以參考下2014-04-04
使用微信內(nèi)嵌H5網(wǎng)頁解決JS倒計時失效問題
最近參考項目開發(fā)，遇到這樣一個需求將H5商城頁面嵌套到公司微信公眾號里，在開發(fā)遇到一個棘手的問題，js倒計時失效問題，怎么回事呢？下面說下我使用微信內(nèi)嵌h5解決的這一問題，需要的朋友參考下吧2017-01-01
javascript打印html內(nèi)容功能的方法示例
這篇文章主要介紹了javascript打印html內(nèi)容的小示例，大家參考使用2013-11-11
今天小編就為大家分享一篇解決layui調(diào)用自定義方法提示未定義的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09