js類式繼承與原型式繼承詳解
更新時間:2016年04月07日 15:58:27 作者:mguo
這篇文章主要為大家詳細介紹了js類式繼承與原型式繼承,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js類式繼承與原型式繼承相關(guān)代碼,供大家參考,具體內(nèi)容如下
1.js類式繼承
/* -- 類式繼承 -- */ //先聲明一個超類 function Person(name) { this.name = name; } //給這個超類的原型對象上添加方法 getName Person.prototype.getName = function() { return this.name; } //實例化這個超 var a = new Person('Darren1') console.log(a.getName());//Darren1 //再聲明類 function Programmer(name, sex) { //這個類中要調(diào)用超類Person的構(gòu)造函數(shù),并將參數(shù)name傳給它 Person.call(this, name); this.sex = sex; } //這個子類的原型對象等于超類的實例 Programmer.prototype = new Person(); //因為子類的原型對象等于超類的實例,所以prototype.constructor這個方法也等于超類構(gòu)造函數(shù),你可以自己測試一下,如果沒這一步,console.log(Programmer.prototype.constructor這個是Person超類的引用,所以要從新賦值為自己本身 console.log(Programmer.prototype.constructor); /*function Person(name) { this.name = name; } */ Programmer.prototype.constructor = Programmer; console.log(Programmer.prototype.constructor); /*function Programmer(name, sex) { Person.call(this, name); this.sex = sex; } */ //子類本身添加了getSex 方法 Programmer.prototype.getSex = function() { return this.sex; } //實例化這個子類 var _m = new Programmer('Darren2', 'male'); //自身的方法 console.log(_m.getSex());//male //繼承超類的方法 console.log(_m.getName());//Darren2
2.js原型式繼承
/* -- 原型式繼承 -- */ //clone()函數(shù)用來創(chuàng)建新的類Person對象 var clone = function(obj) { 4 var _f = function() {}; //這句是原型式繼承最核心的地方,函數(shù)的原型對象為對象字面量 _f.prototype = obj; return new _f; } //先聲明一個對象字面量 var Person = { name: 'Darren', getName: function() { return this.name; } } //不需要定義一個Person的子類,只要執(zhí)行一次克隆即可 var Programmer = clone(Person); //可以直接獲得Person提供的默認值,也可以添加或者修改屬性和方法 alert(Programmer.getName()) Programmer.name = 'Darren2' alert(Programmer.getName()) //聲明子類,執(zhí)行一次克隆即可 var Someone = clone(Programmer);
以上就是本文的全部內(nèi)容,希望對大家學習javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- javascript原型鏈學習記錄之繼承實現(xiàn)方式分析
- [js高手之路]原型式繼承與寄生式繼承詳解
- Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別之處
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- 基于JavaScript實現(xiàn)繼承機制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
- JS繼承--原型鏈繼承和類式繼承
- javascript學習筆記(九)javascript中的原型(prototype)及原型鏈的繼承方式
- JavaScript原型式繼承實現(xiàn)方法
相關(guān)文章
javascript回調(diào)函數(shù)的概念理解與用法分析
這篇文章主要介紹了javascript回調(diào)函數(shù)的概念理解與用法,結(jié)合具體實例形式分析了javascript回調(diào)函數(shù)的功能、原理、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-05-05JavaScript使用structuredClone實現(xiàn)深拷貝
在JavaScript中,實現(xiàn)深拷貝的方式有很多種,每種方式都有其優(yōu)點和缺點,今天介紹一種原生JavaScript提供的structuredClone實現(xiàn)深拷貝,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2024-03-03利用hasOwnProperty給數(shù)組去重的面試題分享
obj.hasOwnProperty(attr) 判斷是否是原型中的屬性,false就是原型中的屬性,下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2018-11-11