[原创] JS 继承详解。欢迎拍砖

最近迷上了JS 没办法搞WEB离不开这东西，所以如果哪位仁兄还说JS无用论还请绕道

过开发积累的经验加上书本上的知识（也算是理论与实际相结合吧）总结此文也算是自己学习阶段的一份总结吧！希望给广大JS 爱爱好者一点帮助

废话不多说 JS 继承一般分为3种今天先说第一种类式继承

首先来说JS 本事是没有类的概念的。JS 的类实际就是function 对象先上码

<script>
function Test(name){this.name = name;
}
Test.prototype.fun = function(){alert(0)}
testInc = new Test('111');
testInc.fun();
console.dir(testInc)
</script>

首先，我们定义了function Test 我们可以把这个当成一个类类似 class Test{}

然后我们定义了类的一个属性name ，给这个方法(类)的prototype属性定义了一个方法 //alert(0)

剩下的动作相信无论搞什么语言的同学都知道了。

介绍下prototype 属性。当你定义了一个方法的时候（也可以像我们这样把他当成类）方法都会创建一个prototype属性用来返回对象类型原想的引用的

具体是都有什么有兴趣的同学可以console.dir(Test); 在chrome或者fireFox上看下

通过给Function 的prototype 添加方法的过程我们可以实现动态的给类添加方法并且在实例中调用他

好了，准备工作完毕然后我们创建一个子类实现JS继承首先JS 是没有extend 这种关键字的。（自定义的除外）

但是根据上面的思路我们可以给一个类添加另一个类的属性和方法实现继承关系（并不是真的继承）代码如下

<script>
function Test(name){this.name = name;
}
Test.prototype.fun = function(){alert('my name is '+this.name);}
function subTest(name,age){Test.call(this,name);   //实现属性继承this.age = age
}
subTest.prototype = new Test(); //实现方法继承
subTest.prototype.constructor = subTest;
subTest.prototype.subfun = function (){alert('my name is'+this.name+' and my age is '+this.age)}
subTestIns = new subTest('xiaojiang','24');
subTestIns.fun();      //my name is testName
subTestIns.subfun();   //my name is testName and my age is testAge
</script>

call 调用一个对象的一个方法，以另一个对象替换当前对象

call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。同样的方法还有 apply 只是把call后面的参数改成 Array 调用罢了

这样可以使子类获得父类的属性name;

再把父类的方法附加给子类这样就实现了JS 的类式继承。

[原创] JS 继承详解。欢迎拍砖相关推荐

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果二.Three.js简介三.Three.js代码正常运行显示条件 (1)不载入 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...
python类继承中构造方法_第8.3节 Python类的__init__方法深入剖析：构造方法与继承详解...
第8.3节Python类的__init__方法深入剖析:构造方法与继承详解一. 引言上两节介绍了构造方法的语法及参数,说明了构造方法是Python的类创建实例后首先执行的方法,并说明如果类没 ...
（117）System Verilog类继承详解
(117)System Verilog类继承详解 1.1 目录 1)目录 2)FPGA简介 3)System Verilog简介 4)System Verilog类继承详解 5)结语 1.2 FPGA ...
Python爬虫JS解密详解，学会直接破解80%的网站（一）！！！
文章目录 1.网页查看 2.有道翻译简单实现源码 3.JS解密(详解) 4.python实现JS解密后的完整代码 4.1.实现效果 5.JS解密后完整代码升级版 5.1.实现效果 CSDN独家福利降临 ...
【职坐标】java面向对象三大特性（二）——继承详解
[职坐标]java面向对象三大特性(二)--继承详解 a) 什么是继承? i. 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那个类即可 b) ...
扬州掼蛋游戏网JS特效详解
WEB前端特效现在是满天飞,今天拿扬州掼蛋游戏网来举例说明jQuery 在现在的 Web 开发项目中扮演着重要角色,借助 jQuery 可以让网站有更好的可用性和用户体验,让访问者对网站留下 ...
C++继承详解之四——is-a接口继承和has-a实现继承
在学习继承的过程中,不管是在书中还是在网上找资料,都跟多态分不开,其中还有个很抓人眼球的问题,那就是书上总是说的is-a关系和has-a关系. 很多书中讲到继承时都会说: public继承是一个接口继 ...

[原创] JS 继承详解。欢迎拍砖

[原创] JS 继承详解。欢迎拍砖相关推荐

最新文章

热门文章