js 原型和构造方法 内容是 从别处复制来的

Javascript来说,方法在本质上也是一种属性。

构 造方法 和构造属性一样,它是分别存储于每个实例之中的,相互之间是完全独立。

原型方法 和原型属性一样,他是存储于原型中的,每个实例中存储的实际上一 个指向原型的指针。

所有对原型方法的修改会影响到所有实例,而构造方法实际上只能通过实例来访问和修改,也只会影响到相应的实例。

先写结论:方法通常应该使用原型模式定义,并且在必要时通过原型来动态重定义,避免使用构造模式定义方法。

看看示例代码吧: 我们首先构造一个简单的类car,定义2个方法,分别是构造方式定义的constructFunction 和 原型方式定义的 prototypeFunction

function echo(str){document.write(‘<div>‘+str+‘<div>‘);}
 
 function car(){
 this.constructFunction = function(){
 echo(‘This is constructFunction‘);
 };
 }
 
 car.prototype.prototypeFunction = function(){
 echo(‘This is prototypeFunction‘);
 };
 
 aCar = new car();
 bCar = new car();
 
 aCar.constructFunction();
 aCar.prototypeFunction();
 bCar.constructFunction();
 bCar.prototypeFunction();

输出结果:

This is constructFunction
This is prototypeFunction
This is constructFunction
This is prototypeFunction

原型方法可以随时动态定义和修改,修改的方法当然是通过类的原型访问,通过重新定义原型方法可以影响到类的所有实例:

aCar = new car();
 bCar = new car();
 
 car.prototype.prototypeFunction = function(){
 echo(‘This a new prototypeFunction‘);
 };
 
 aCar.prototypeFunction();
 bCar.prototypeFunction();

输出结果为:

This a new prototypeFunction
This a new prototypeFunction

可以看到,即使在实例已经创建以后,对原型的修改也可以反映到影响到所有实例上来。

构造方法是无法通过原型来访问的,只能通过实例访问,也只能通过实例来重定义。下面代码尝试修改实例:aCar的方法constructFunction

aCar = new car();
 bCar = new car();
 cCar = new car();
 
 // car.constructFunction() 尝试通过类或者类的原型访问构造定义的方法是无效的,会报错
 // car.prototype..constructFunction() 尝试通过类或者类的原型访问构造定义的方法是无效的,会报错
 
 aCar.constructFunction = function(){
 echo(‘This a new constructFunction‘);
 }
 
 aCar.constructFunction();
 bCar.constructFunction();
 cCar.constructFunction();

输出结果:

This a new constructFunction
This is constructFunction
This is constructFunction

对实例aCar的构造方法和影响到了aCar而没有影响到其它实例

事实上,原型方法也是可以通过实例直接修改的,如果直接修改实例的原型方法会出现什么情况呢?

本 段开头已经指出:“每个实例中原形方法存储的实际上一个指向原型的指针”,如果你尝试修改实例的原型方法,就改变这个指针,使其指向新定义的方法函数;而 原型中的方法定义并没有受到影响。同时,指针既然转向,那么该实例的这个原型方法也就脱离了原型的定义,而成为一个独立方法。 通过下面的代码可以清晰的明白这种过程:

aCar = new car();
 bCar = new car();
 cCar = new car();
 
 //修改aCar的原型方法 prototypeFunction
 aCar.prototypeFunction = function(){
 echo(‘This a new prototypeFunction‘);
 }
 //检查修改结果
 aCar.prototypeFunction();
 bCar.prototypeFunction();
 cCar.prototypeFunction();
 
 //修改原型方法 prototypeFunction ,就会发现奥妙之处了
 car.prototype.prototypeFunction = function(){
 echo(‘This a new prototypeFunction modified by prototype‘);
 }
 //检查修改结果
 aCar.prototypeFunction();
 bCar.prototypeFunction();
 cCar.prototypeFunction();

输出结果:

//第一段的输出结果
This a new prototypeFunction                   //在修改aCar的原型方法prototypeFunction时,仅aCar受到了影响
This is prototypeFunction
This is prototypeFunction
//第二段的输出结果
//我们重新定义了car的原型方法prototypeFunction,但是aCar没有受到影响,aCar的方法prototypeFunction已经脱离了原型的影响。
This a new prototypeFunction
This a new prototypeFunction modified by prototype
This a new prototypeFunction modified by prototype

注意:直接修改实例的原型方法虽然是可行的,但是会带来代码上的混淆和混乱,要尽可能避免使用这种方式.

时间: 2024-08-24 09:35:16

js 原型和构造方法 内容是 从别处复制来的的相关文章

JS正则表达式获取分组内容实例

JS正则表达式获取分组内容. 支持多次匹配的方式: var testStr = "now test001 test002"; var re = /test(\d+)/ig; var r = ""; while(r = re.exec(testStr)) { alert(r[0] + " " + r[1]); } 此外也可以用testStr.match(re),但是这样的话就不能有g的选项,而且只能得到第一个匹配. 另外备忘一下:正则表达式对象的属

js 原型链和继承(转)

在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var obj = { name: "obj" }; 我们通过控制台把 obj 打印出来: 我们会发现 obj 已经有几个属性(方法)了.那么问题来了:valueOf / toString / constructor 是怎么来?我们并没有给 obj.valueOf 赋值呀. 上面这个图有点难懂,我手画

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

JS 原型

<!-- ———————————————— JS原型(prototype) ———————————————————— --> //构造函数模式 (W3C推荐使用) function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; this.sayName=function(){ return this.name; } } var person1=new Person("B",11,"

js原型解析

我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node.js一样的扩展语言,在最后上随着快速化,工程化,以及一些业务开发的需要,经过不断的完善,最后变成了一种angular的框架,这就是简单的js的发展历史,但是今天我们的重点不在于讲述js发展的历史,而注重在于分析其中原生态js的一些特性,诸如prototype. 译过来就是原型的意思,那么什么是原型呢

JS 原型链图形详解

JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的.即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象.这个prototype可以是一个对象或者null.* 让我们看一个关于对象的基本例子.一个对象的prototype是

深入理解JS原型链与继承

我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天要讨论的主题,有许多人写过许多精彩的文章,但是今天我还是想把自己的理解的知识记录下来.我在学习 掌握JS原型链和继承的时候,就是看得@阮一峰老师的写的文章,觉得他写的技术类的文章都容易让理解,简明概要,又好理解.他是我学习JS路程里面一个比较佩服的导师,昨天重新看了他写的<Javascript 面向

js原型链与继承(初体验)

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

js原型链部分详细使用说明案例

1. 'index.html'文件 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原型讲解</title> </head> <body> <script src='js/person.js'></script> <script s