关于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上的方法 函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们 ...
随机推荐
- 1.PHP内核探索:从SAPI接口开始
SAPI:Server Application Programming Interface 服务器端应用编程端口.研究过PHP架构的同学应该知道这个东东的重要性,它提供了一个接口,使得PHP可以和其他 ...
- PHP关闭提示、打印配置
打印配置 PHP.exe -i > Info.txt 关闭 PHP 提示的方法 搜索php.ini: error_reporting = E_ALL 改为: error_reporting = ...
- 挑战编程PC/UVa Stern-Brocot代数系统
/* Stern-Brocot代数系统 Stern-Brocot树是一种生成所有非负的最简分数m/n的美妙方式. 其基本方式是从(0/1, 1/0)这两个分数开始, 根据需要反复执行如下操作: 在相邻 ...
- kuaisupaixu
#include<stdio.h> void quiksort(int a[],int low,int high) { int i = low; int j = high; ...
- jdk Tomcat配置
安装Tomcat需要先安装JDKJDK安装JDK安装会有两次,两次不能再同一目录 你可以新建两个文件夹 JDK JRE 第一次安装在JDK 第二次在JRE在我的电脑右键属性 高级系统设置 环境变量 系 ...
- 探讨mvc下linq多表查询使用viewModel的问题
最近在开发mvc3的时候发现了一个问题,就是如何在view页面显示多表查询的数据,最简单的办法就是使用viewmodel了,以下本人使用viewmodel来实现多表查询的3中方法, 先贴代码再说: 1 ...
- Partial Tree---hdu5534(完全背包)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5534 题意:有n个节点,让这n个节点形成一棵树,这棵树的种类有很多种,现在告诉n-1个f[i],表示度 ...
- clang: error: no such file or directory: 报错
clang: error: no such file or directory: '/Users/KuaiYong/Desktop/svn/gamebox_v1.2/SettingViewContro ...
- JS-003-innerText 与 innerHTML 区别
此文主要讲述在使用 innerText 和 innerHTML 获取元素中间值时的差别,我个人将二者的区别简单的理解为: webelement.innerText : 获取的是页面元素显示的文本 we ...
- JS-001-单选复选按钮操作
此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...