您的当前位置:首页JavaScript中prototype为对象添加属性的误区介绍_基础知识
广告

JavaScript中prototype为对象添加属性的误区介绍_基础知识

2023-12-04 来源:旭新科技网

先上需要用到的全部代码片段(截取) 代码如下: MenuControl.prototype.boxDisplay = false;//是否显示图层选择菜单 MenuControl.prototype.controlUI; MenuControl.prototype.show = function(){ if(pointControl.boxDisplay){ pointControl.hide(); } menuBoxDiv.style.display = ""; this.boxDisplay = true; this.controlUI.style.backgroundColor = '#DDDDDD'; }; MenuControl.prototype.hide = function(){ menuBoxDiv.style.display = "none"; this.boxDisplay = false; this.controlUI.style.backgroundColor = 'white'; }; //图层选择开关 function MenuControl(controlDiv, map) { controlDiv.style.padding = '5px'; var controlUI = document.createElement('div'); this.controlUI = controlUI; controlUI.style.backgroundColor = 'white'; controlUI.style.height = '18px'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '1px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = '点击启用菜单'; controlDiv.appendChild(controlUI); var controlText = document.createElement('div'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '12px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = '图层选择'; controlUI.appendChild(controlText); google.maps.event.addDomListener(controlUI, 'click', function() { if(menuControl.boxDisplay){ menuControl.hide(); }else{ menuControl.show(); } }); } //点开关框体 PointControl.prototype.boxDisplay = false;//是否显示图层选择菜单 PointControl.prototype.controlUI; PointControl.prototype.show = function(){ if(menuControl.boxDisplay){ menuControl.hide(); } pointBoxDiv.style.display = ""; this.boxDisplay = true; this.controlUI.style.backgroundColor = '#DDDDDD'; }; PointControl.prototype.hide = function(){ pointBoxDiv.style.display = "none"; this.boxDisplay = false; this.controlUI.style.backgroundColor = 'white'; }; function PointControl(controlDiv, map) { controlDiv.style.padding = '5px'; var controlUI = document.createElement('div'); this.controlUI = controlUI; controlUI.style.backgroundColor = 'white'; controlUI.style.height = '18px'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '1px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = '点击操控点菜单'; controlDiv.appendChild(controlUI); var controlText = document.createElement('div'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '12px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = '点'; controlUI.appendChild(controlText); google.maps.event.addDomListener(controlUI, 'click', function() { if(pointControl.boxDisplay){ pointControl.hide(); }else{ pointControl.show(); } }); } 做的是谷歌的地图应用,其中有右方有两个div按钮,通过点击打开左方的div子菜单 要求是 打开前判断该子菜单是否已经为打开状态,如是,则先关闭,后打开 在开关子菜单时,按钮会据相应行为变色 这里就要求在各个按钮的show()方法下操作另一按钮的属性和方法来达到开关的效果 开始时写成这样 代码如下: MenuControl.prototype.controlUI; MenuControl.prototype.show = function(){ controlUI.style.backgroundColor = '#DDDDDD';//直接调用属性 }; function MenuControl(controlDiv, map) { controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'; } 结果无论开关哪一个菜单,都只有“点”按钮变色 原因大概是controlUI莫名定义为全局变量了 后来我试图这样 代码如下: MenuControl.prototype.controlUI; MenuControl.prototype.show = function(){ this.controlUI.style.backgroundColor = '#DDDDDD';//添加this关键字 }; function MenuControl(controlDiv, map) { controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'; } 结果还是失败 后来我想通了,大概这样就可以了 代码如下: MenuControl.prototype.controlUI.style.backgroundColor = "white";//一上来就给你赋值,看你往哪儿跑 MenuControl.prototype.show = function(){ this.controlUI.style.backgroundColor = '#DDDDDD'; }; function MenuControl(controlDiv, map) { controlUI = document.createElement('div'); this.controlUI.style.backgroundColor = 'white'; } 这样至少有错误信息了,不能给undefined添加style属性什么的 于是我绝望了,准备给所有属性也添加上全局变量,这样调用就方便许多 没成想,被自己启发了 于是就有了最开始那段代码 代码如下: MenuControl.prototype.controlUI;//先建立此属性,挖一个坑 MenuControl.prototype.show = function(){ this.controlUI.style.backgroundColor = '#DDDDDD';//使用this关键字调用,实际调用的是this.controlUI对象 }; function MenuControl(controlDiv, map) { var controlUI = document.createElement('div');//建立局部变量,并正常赋值 this.controlUI = controlUI;//将此局部变量反赋给this对象的属性,达到关联引用 controlUI.style.backgroundColor = 'white';//正常调用引用对象进行操控 } 这样就将prototype添加的属性和自身创建的局部变量关联起来,使其可被外部其它对象所调用获取 达到成功将同名属性通过类对象进行区分并全局调用

小编还为您整理了以下内容,可能对您也有帮助:

javascript面向对象编程:通过prototype原型方式创建对象的缺陷

视频讲解的javascript面向对象编程语言中关于原型prototype的方式实现对象的创建,此种方式是有一定缺陷的,面向对象中一般来说属性要私有化,并且每个对象都有自己特有的属性,而使用原型方式达不到这个要求。

javascript创建对象的几种模式介绍_基础知识

在js中有几种模式可以创建对象,通过对象操作所包含的属性与方法。

一般来说,构造函数名称的第一个字母为大写字母,非构造函数名称的第一个字母为小写字母,当然,构造函数与一般函数唯一的区别只是调用的方式不同而已,所以任何函数只要通过new来调用,那它就可以作为构造函数,若不通过new来调用,则与一般函数一样。

谈谈我对这几种模式的理解:

工厂模式:创建一个一般函数,在函数里创建一个Object对象,为这个对象增添属性与方法,同时赋予其值,最后返回对象。无法识别对象类型。

构造函数模式:创建构造函数,使用this来赋值,每当创建一个实例时,方法都被创建一次,而每个方法都执行相同的命令,这就多余了。这个缺点可以通过将方法放到全局环境中,但是,这样就没有封装性了。不过可以通过原型模式解决。

原型模式:每个函数都有一个prototype属性,该属性是一个指针,指向一个对象,该对象包含其函数创建的所有实例共享的属性与方法。

原型对象,构造函数以及实例之间的关系如下图:

图解:1:构造函数以及由构造函数创建的实例,它们的prototype属性都指向构造函数的原型对象。

2:构造函数的原型对象具有constructor属性,该属性指向构造函数。

3:构造函数的原型对象所包含的所有属性与方法可以被由构造函数所创建的所有实例共享。

使用对象字面量重写原型对象后,constructor则指向object构造函数,若需要其指向另一构造函数,则需修改原型对象的constructor属性的值,比如:constructor:Person,这样Person的原型对象即使被重写,原型对象的constructor仍指向Person构造函数。

当先创建实例时:若是直接添加属性或方法,实例可以访问。

若是重写原型对象,则构造函数的prototype指向新的原型对象,而之前创建的实例的prototype仍指向最初的原型对象,所以实例访问不到新的原型对象的新属性或和新方法。

原型对象包含的是共享的属性与方法,那么每个实例都拥有这些信息,这样实例之间就没有什么不同了,而且还不可以传参数,这不是我们所想要的。每个实例之间有共同的信息,又有不同的信息,所以我们可以组合使用构造函数模式与原型模式。

构造函数模式与原型模式的组合使用:

态原型模式:将的构造函数与其原型对象结合在一起,在构造函数里初始化原型,为其添加方法。

若该方法不存在,则将其添加到原型对象上,只在初始化原型时才执行,而且只执行一次。

寄生构造函数模式:与工厂模式类似,区别为:寄生构造函数模式为构造函数,通过new来创建实例。

稳妥构造函数模式:没有公共的属性,其方法不引用this的对象。创建实例时不使用new。只能通过方法访问属性(即传入的数据)。

JS问题,给对象添加属性和给对象的原型添加属性有什么区别?

假设有对象objece;

var object = function(){

    this.a = 1;

    this.b = 2;

}

然后我 var obj1 = new object();

这里的obj1就是对象,给对象obj1加一个属性 obj1.c = 3;

但是我再var obj2 = new object();这里的obj2并没有c这个属性;

但是我通过原型的方式加属性c; object.prototype.c = 3;

那么我var obj3 = new object();

obj3就有c这个属性

望采纳!

Js原型(prototype)01

1.原型是 function对象的一个属性,是构造函数构造出对象的公有祖先,而原型本身也是一个对象。

2.从原型的概念出发,我们可以用构造函数构造出的对象提取原型上的属性。

3.因为原型也是一个对象,所以原型本身对自己的属性有增删改查的权利。

4.对象如何知道自己的原型是谁,可以通过对象中的_ proto_ 属性查看,_ proto_ 属性存的就是对象的原型,他是作为对象与原型之间的连接。

5.构造函数构造的对象如何查看是谁构造出自己的,可以通过constructor属性

首先从原型的定义开始解释:

原型是function对象的一个属性,这句话如何理解?

1.function函数其实就是一个对象,当你构造出一个函数时,这个函数对象就有了自己隐式的属性,prototype就是其中的一个属性。

那么先构造出一个函数,在控制台查看,函数对象是否有prototype,并且prototype是否也是一个对象。

我们在控制台中给father的prototype属性添加name属性并赋值,看看是否有效?

给prototype添加属性后,并可以输出name的值。那么也是可以给prototype添加方法的。

给prototype添加say方法实现输出自己的name,执行say(),的确输出了'haha'

2.我们如何理解,prototype是构造函数构造出对象的公有祖先?

首先当构造出函数时prototype就成为了这个函数的属性,并且prototype也可以添加属性和方法,而构造函数构造出的对象能继承构造函数中的方法,且这个对象自身也能添加属性和方法?

那么问题来了?

当我查看对象的name属性时,对象并没有这个属性,那他就会自动去构造出自己的函数中去找是否有这个属性,那当构造函数也没这个属性时,他就会去自己的原型上查找是否有这个属性,如果原型上存在name属性,对象就会获取到这个属性并输出。

而这个获取到原型属性的过程,其实就是一种继承的方式。

举例:

1.prototype是function对象的一个属性;

2.prototype是构造函数构造出对象的公有祖先;

3.prototype也是一个对象。

从总结的第三点可以知道,prototype可以拥有自己的属性和方法,并有权进行增删改查,那么接下来展示prototype如何进行增删改查。

对Mom的prototype属性进行操作。

增:

给出你想要添加的属性,并赋值。

删:

delete

所以prototype对象的增删改查和普通对象的用法相同。

这里还需注意,prototype上的属性只能由自身操作,对象从prototype上获取到的属性进行操作后,并不会影响到prototype。

接下来解释对象的_ proto_ 属性(前后分别是两个_)

_ proto_ 属性里存的是对象的prototype

举例:

接下来解释constructor属性:

对象可以通过该属性查看构造出自己的函数

总结:

prototype是function对象的一个属性,是构造函数构造出的对象的公有祖先,他本身也是一个对象,所以他可以有自己的属性和方法,并对其进行增删改查的操作,对象没有权利修改prototype上的属性和方法。对象可以通过自己的_ proto_ 查看他的prototype,通过constructor查看构造出自己的函数。

旭新科技网还为您提供以下相关内容希望对您有帮助:

Javascript中的Prototype到底是什么_javascript技巧

在uw3c的prototype对象中出现的任何属性或者函数都可以在test对象中直接使用,这个就是JS中的原型继承了。通常,这样创建一个对象:以上,使用new关键字,通过对象(函数也是特殊对象)创建一个对象实例。在基于类的语言中,属性或字段通常都是在类中事先定义好了,但在Javascript中,在创建对象之后还可以为...

js中向对象中添加属性的两种方法?

内部属性有特殊的名称都写在两个方括号,如:内部属性[[Prototype]]指向对象的原型。它可以通过Object.getPrototypeOf()读取。它的值只能通过创建具有给定原型的新对象来设置,例如通过object.create()或__proto__ 。内部属性[[Extensible]]决定是否可以向对象添加属性。可以通过Object.isExtensible() 方法判...

javascript创建对象的几种模式介绍_基础知识

原型模式:每个函数都有一个prototype属性,该属性是一个指针,指向一个对象,该对象包含其函数创建的所有实例共享的属性与方法。原型对象,构造函数以及实例之间的关系如下图: 图解:1:构造函数以及由构造函数创建的实例,它们的prototype属性都指向构造函数的原型对象。2:构造函数的原型对象具有constructor...

JavaScript中,使用prototype和直接设置给对象属性有什么区别?

回答:Function.prototype是定义原型 用new 生成对象,可以使用this调用原型 如 var f = new Function() 可以调用f.sayHi,但f.sayHello不能调用

对象的prototype属性是什么?有什么作用?

对象的prototype属性其实也是一个对象,它方便我们为当前对象添加属性和方法。当然,不使用prototype也能为对象添加属性和方法,但是不用prototype会显得不是很友好,为什么这么说呢?我以为对象添加方法为例,不用protoype属性添加方法是这样的:var student1 = { name: “Jack”, socre: 88};var student...

JavaScript如何使用原型模式创建对象实例用法详解

在上面的代码中,我们将Person.prototype 设置为等于一个以对象字面量形式创建的新对象。最终结果相同,但有一个例外:constructor 属性不再指向Person 了。前面曾经介绍过,每创建一个函数,就会同时创建它的prototype 对象,这个对象也会自动获得constructor 属性。而我们在这里使用的语法,本质上完全重写了...

JavaScript中,使用prototype和直接设置给对象属性有什么区别?

Function.prototype是定义原型 用new 生成对象,可以使用this调用原型 如 var f = new Function()可以调用f.sayHi,但f.sayHello不能调用

请教高手一个JAVASCRIPT中原型的问题,请通俗解释如下原型PROTOTYPE:_百度...

包含W、H值的,prototype是给对象插入新的属性或方法,用下面这段程序来给你讲解下: function employee(name,job,born){ this.name=name;this.job=job;this.born=born;} // 此时类的定义已经结束 employee.prototype.hellow = function() //重新给类插入一个原型hellow方法,此时employee类相当于在...

Top