1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > JavaScript中难点:prototype和构造函数绑定实例详解

JavaScript中难点:prototype和构造函数绑定实例详解

时间:2022-11-21 15:23:18

相关推荐

JavaScript中难点:prototype和构造函数绑定实例详解

web前端|js教程

JavaScript,prototype,js

web前端-js教程

JavaScript的对象和构造函数

zepto.js源码实现原理,ubuntu获取蓝牙数据,tomcat8和solr,taptap评论爬虫,boosttrap php网站,家用电器seo优化入门lzw

定义一个JavaScript对象可以这么定义

手机团购系统源码,vscode 显示空格,硬盘上安装ubuntu太卡,tomcat安全连接,sqlite 遍历表名,jquery loadding插件,前端框架师年薪百万,实用python爬虫代码,php环境 win7,西宁seo网络优化,供需信息网站源码,网页中插入本地图片,crm客户后台管理系统模板,两列布局html5商品展现页面,html5社区物业管理系统的意义,小程序源码 克隆lzw

20的源码,ubuntu启动界面闪烁,爬虫下载图片流,php aspell,惠州seo专员lzw

var a = {x : 1,y : 2,add : function () {return this.x + this.y;},mul : function () {return this.x * this.y;}}

这样,你就定义了一个变量a,这个变量除了有x和y两个公有成员外,还有两个add和mul两个函数(公有方法)。但是这样的定义方法的缺点有2条:

1.批量生成对象很不方便,如果你var b=a;那么你每次修改b的成员,都会同时改掉a的成员,因为JavaScript的引用机制

2.如果每次生成对象需要自定义一些成员,都要写出相应的赋值操作,增加代码行数。

所以,在定义一个JavaScript对象之前,我们可以先定义一个构造函数。

function A(x, y) {this.x = x;this.y = y;this.add = function () {return this.x + this.y;}this.mul = function () {return this.x * this.y;}}

然后,定义一个对象

a = new A(1, 2);

上面这句代码看起来简单,但是要和C++等面向对象的语言做个区分,A并不是严格意义上“类”的概念,因为JavaScript是没有类的,只是调用了构造函数而已。

现在问题来了,我们怎么实现继承?C++把封装,继承,多态这三个面向对象的特征实现得清清楚楚。但是对于JavaScript这样一个比较浪的语言,没有一个很严格的继承机制,而是采用以下几种方式来模拟。

JavaScript的prototype

为了能够讲清后面的apply或call函数,这里先引入prototype。prototype是只有Function才有的。

要用好继承,首先要明白为什么要设计继承这个东西?无非就是“把公共的部分”提取出来,实现代码复用。

所以在JavaScript里,也是把公共部分放在Function的prototype里。

我们来比较两个用prototype来实现继承的例子

function A(x, y) {this.x = x;this.y = y;this.add = function () {return this.x + this.y;}this.mul = function () {return this.x * this.y;}}function B(x,y){}B.prototype=new A(1,2);console.log(new B(3,4).add());//3

这个例子中,子类的prototype指向一个A类对象

我们再实现一个B继承A的例子:

function A() {}A.prototype = {x : 1,y : 2,add : function () {return this.x + this.y;},mul : function () {return this.x * this.y;}}A.prototype.constructor=A;function B(){}B.prototype=A.prototype;B.prototype.constructor=B;

B的prototype对象引用了A的prototype对象,因为是引用,所以如果修改了B的prototype对象,A的prototype对象也随之修改,因为本质上他们都指向一块内存。所以每次改动B类型的prototype都要手动将constructor改回,防止错乱。相比两个例子,上一个例子因为没有引用,所以不会发生这个问题。

创建一个B类型的对象

b=new B();

b对象具有A类型的一切成员

console.log(b.add()); //3

因为每个prototype对象都有两个重要成员:constructor和_proto_,constructor本质上是一个函数指针,所以B.prototype=A.prototype执行后,覆盖掉了constructor,所以后面要让constructor重新指向B类型的构造函数。

JavaScript的构造函数绑定

在定义完一个A类型的构造函数后,再定义一个B类型,然后在B类型构造函数内部,“嵌入执行”A类型的构造函数。

function A(x, y) {this.x = x;this.y = y;this.add = function () {return this.x + this.y;}this.mul = function () {return this.x * this.y;}}function B(x, y, z) {A.apply(this, arguments);this.z = z;}console.log(new B(1,2,3));

apply函数和call函数基本一样,可以在B类型构造函数内部执行A类型构造函数。同时也可以继承A的所有成员。

显示结果:

这里给个公式:在B构造函数里写A.apply(this),可以让B构造出来的对象可以拥有A构造函数里的所有成员。

谈到apply和call,还可以实现多重继承

function IA(){this.walk=function(){console.log("walk");}}function IB(){this.run=function(){console.log("run");}}function Person(){IA.apply(this);IB.apply(this);}var p=new Person();p.walk();//walk p.run();//run

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。