关于prototype
之前听过课,可是这一块没怎么听懂,最近练了两个例子,又问了问小石同学,朦朦胧胧,感觉还是不太懂,记录点心得
最基本的例子
function Box(name,age){
this.name=name;
this.age=age;
this.run=function(){
return this.age+this.name;
}
}
var box=new Box('lee',);
console.log(box.run());
这个是传了两个参数,如果不传参的话,当然也行
function Box(){
this.name='age';
this.age='';
this.run=function(){
return this.age+this.name;
}
}
var box=new Box();
console.log(box.run());
如果用prototype的话,应该这样写
function Box(){
this.name='age';
this.age='';
}
Box.prototype.run=function(){
return this.age+this.name;
}
var box=new Box();
console.log(box.run());
也可以写成这样
function Box(){
this.name='age';
this.age='';
}
Box.prototype={
run:function(){
return this.age+this.name;}
}
var box=new Box();
console.log(box.run());
然后解决了我一个问题,以前我是这样写的,报错了
function box1(){
var sum=;
this.box2();
}
box1.prototype.box2=function(){
var count=this.sum+;
console.log(count);
}
new box1()
其实,应该写成这样,不能用var,用var就变成了私有变量了
function box1(){
this.sum=;
this.box2();
}
box1.prototype.box2=function(){
var count=this.sum+;
console.log(count);
}
new box1()
还有就是new出来是一个对象,必须用对象.XXXX才行
function box1(){
this.sum=;
}
box1.prototype.box2=function(){
var count=this.sum+;
return count;
}
console.log(new box1().box2())
如果是实例化方法和属性的话,他们的引用地址是不一样的
function box(name,age){
this.name=name; //实例化属性
this.age=age;
this.run=function(){ //实例化方法
return this.name+this.age+'运行中';
}
}
var box1=new box("lee",100); //实例化后地址为1
var box2=new box("lee",100); //实例化后地址为2
alert(box1.name==box2.name) //true
alert(box1.run()==box2.run()); //true
alert(box1.run==box2.run); //false 比较的是引用地址,方法的引用地址

如果是原型的属性和方法的话,他们的引用地址是一样的
function box(name,age){
this.name=name;
this.age=age;
}
box.prototype.run=function(){ //原型方法
return this.name+this.age+'运行中';
}
var box1=new box("lee",100); //原型方法,他们的地址是共享的
var box2=new box("lee",100); //原型方法,他们的地址是共享的
alert(box1.run==box2.run); //true 比较的是引用地址

根据上图,创建的每一个函数都有prototype属性,__proto__是一个指针,指向prototype原型对象,new出来的对象都有这个属性,他的作用是指向构造函数的原型属性constructor,通过这两个属性,就可以访问到原型里的属性和方法了。
function box(name,age){
this.name=name;
this.age=age;
}
box.prototype.run=function(){
return this.name+this.age+'运行中';
}
var box1=new box("lee",100);
box.prototype //box {}
box.prototype.constructor //function box(name,age){....} 指向本身
box1.constructor //function box(name,age){....} 指向本身
box1.constructor==box.prototype.constructor //true
box1.__proto__ //box {}
box1.__proto__==box.prototype //true
三、prototype字面量方法
function box(name,age){
this.name=name;
this.age=age;
}
box.prototype={
constructor:box, //强制指回box,如果不重新定义此属性,contructor指向了object,认为{}定义了一个数组
run:function(){
return this.name+this.age+'运行中';
}
}
var box1=new box("lee",100);
alert(box1.constructor)
@
关于prototype的更多相关文章
- js闭包 和 prototype
function test(){ var p=200; function q(){ return p++; } return q; } var s = test(); alert(s()); aler ...
- PHP设计模式(六)原型模式(Prototype For PHP)
原型设计模式: 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型设计模式简单的来说,顾名思义, 不去创建新的对象进而保留原型的一种设计模式. 缺点:原型设计模式是的最主要的缺点就 ...
- Function.prototype.toString 的使用技巧
Function.prototype.toString这个原型方法可以帮助你获得函数的源代码, 比如: function hello ( msg ){ console.log("hello& ...
- 分析js中的constructor 和prototype
在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...
- C#设计模式:原型模式(Prototype)及深拷贝、浅拷贝
原型模式(Prototype) 定义: 原型模式:用原型实例指定创建对象的种类,并且通过复制这些原型创建新的对象.被复制的实例被称为原型,这个原型是可定制的. Prototype Pattern也是一 ...
- 关于JS的prototype
在接触JS的过程中,随着理解的深入会逐渐的理解一些比较深奥的理论或者知识,那么今天我们来介绍一下比较难理解的prototype和constructor. 初步理解: 在说prototype和const ...
- js中的原型prototype
var arr1 = new Array(12,34,98,43,38,79,56,1); arr1.sum=function (){ var result = 0; for(var i=0; i&l ...
- [基础] Array.prototype.indexOf()查询方式
背景 最近在看Redux源码,createStore用于注册一个全局store,其内部维护一个Listeren数组,存放state变化时所有的响应函数. 其中store.subscribe(liste ...
- prototype,__proto__,constructor
proto属性: 所有对象都有此属性.但它不是规范里定义的属性,并不是所有JavaScript运行环境都支持.它指向对象的原型,也就是你说的继承链里的原型.通过Object.getPrototypeO ...
- js构造函数的方法与原型prototype
把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法 函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们 ...
随机推荐
- MVC设计模式
随着Web应用的商业逻辑包含逐渐复杂的公式分析计算.决策支持等,使客户机越 来越不堪重负,因此将系统的商业分离出来.单独形成一部分,这样三层结构产生了. 其中‘层’是逻辑上的划分. 三层体系结构是将整 ...
- 纸牌project
用range[0,8)的列表表示牌,这些数字要出现两次.我们建议你通过连接两个range[0,8)的列表来创建这个list.利用Docs来安排列表串联操作 写一个draw handler啥样的draw ...
- Java中同步
解决资源共享的同步操作,有两种方法:一是同步代码块,二是同步方法. 在需要同步的代码块加上synchronized关键字, 同步代码块时必须指定一个需要同步的对象,但一般都是将当前对象(this)设置 ...
- 【Demo】 生成二维码 和 条形码
条形码 和 二维码 对比 一维条形码只是在一个方向(一般是水平方向)表达信息,而在垂直方向则不表达任何信息,其一定的高度通常是为了便于阅读器的对准. 在水平和垂直方向的二维空间存储信息的条形码, 称为 ...
- Bootstrap 辅组类和响应式工具
1.情景文本颜色 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class=" ...
- 更强大的trim功能,过滤汉字等
第一种方法:通过php自带的函数 <?php /* trim 去除一个字符串两端空格, rtrim 是去除一个字符串右部空格, ltrim 是去除一个字符串左部空格. */ ?> < ...
- C/C++ 中长度为0的数组
参考文献:http://blog.csdn.net/zhaqiwen/article/details/7904515 近日在看项目中的框架代码时,发现了了一个奇特的语法:长度为0的数组例如 uint8 ...
- CentOS7+Redis Live安装配置
Redis Live是一个用来监控redis实例,分析查询语句并且有web界面的监控工具,使用python编写. 代码下载地址:https://github.com/nkrode/RedisLive ...
- css3 transform动画效果与公司框架简易动画的差异
先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...
- ArcGIS API for Silverlight 调用GP服务加载等值线图层
原文:ArcGIS API for Silverlight 调用GP服务加载等值线图层 第二篇.Silverlight客户端调用GP服务 利用ArcGIS API for Silverlight实现G ...