js实例属性和原型属性示例详解
转载 &更新时间：日 10:23:42 & 投稿：hebedich
本文通过实例向大家讲述了js实例属性和原型属性，详情请看注释，看不懂的话，请放弃javascript吧。
详情请仔细研读注释，这里就废话少说，直接上代码了。
&!DOCTYPE html&
&&& &meta charset="UTF-8"&
&&& &title&测试文档&/title&
&&& &script type="text/javascript"&
// 实质上属性和方法是一样的，方法是属性为引用型的函数。
//一个对象有4种属性：
//&&&&&&&&&&&&&&&& 1，构造函数通过this关键字定义的属性
//&&&&&&&&&&&&&&&& 2，构造函数通过var关键字定义的属性
//&&&&&&&&&&&&&&&& 3,构造函数的原型对象添加的属性
//&&&&&&&&&&&&&&&& 4，对象动态添加的属性
//实例的公有属性：1&&&&& 通过this关键字定义的属性&&&&&&&&&& 可访问&& 1，2，3，4
//实例的私有属性：2&&&&& 通过var关键字定义的属性。&&&&&&&&& 可访问&& 2
//实例的共享属性：3&&&&& 通过实例指向的原型添加的属性。&&&&& 可访问&& 1,3,4
//实例的静态属性：4&&&&& 对象动态添加的属性。&&&&&&&&&&&&&& 可访问& 1,3,4
//&&&& 实例属性：1，公有
//&&&&&&&&&&&&& 2，私有
//&&&&&&&&&&&&& 4，静态
//&&&& 原型属性：3，共享
//this定义的为特权属性。全部可访问
//var定义的为私有属性。
//动态添加的属性为公有属性。不可访问私有属性
//实例对象指向的原型属性为原型属性。不可访问私有属性，优先级低于公有属性
//实例属性主要有公有属性和特权属性构成。均可被外部和原型属性访问。主要区别在于是否可访问私有属性
//原型属性优先级低于实例属性。可被外部访问和实例属性访问（除私有属性）
//-----------------此处为分割线-----------------------------
// 公有属性：对象暴露给外部环境的属性。也是对象的属性。
// 私有属性：对象内部的属性，往往不可访问.在构造函数层面上考虑才有意义。
// 静态属性：动态添加的属性。也是对象的属性。
// 共有属性：所有构造函数生成的实例所共享的属性。
&&&&&& function User(){
//&&&&&&&&&& 公有属性：每new一个User实例对象，都有的属性。
//&&&&&&&&&&&&&&&&&&& 为实例属性，所有实例的属性不共享内存。
//&&&&&&&&&&&&&&&&&&& 外部可访问。
&&&&&&&&&& this.name='byronvis';
//&&&&&&&&&& 特权方法：每new一个User实例对象，都有的方法。
//&&&&&&&&&&&&&&&&&&& 为实例方法，所有实例的方法不共享内存。
//&&&&&&&&&&&&&&&&&&& 外部可访问。
//&&&&&&&&&&&&&&&&&&& 可访问公有属性。
//&&&&&&&&&&&&&&&&&&& 可访问私有属性。
&&&&&&&&&& this.sayName=function(){
&&&&&&&&&&& alert(this.name);
&&&&&&&&&&&&&& alert(this.school);
&&&&&&&&&&& alert(age);//变量声明会自动提前。
&&&&&&&&&&& alert(this.sex);
&&&&&&&&&& };
//&&&&&&&&&& 私有属性：外部不可访问。
//&&&&&&&&&&&&&&&&&&& 仅对构造函数有意义，对于new的User实例对象无意义。
&&&&&&&&&& var age=22;
//&&&&&&&&&& 私有方法：外部不可访问。
//&&&&&&&&&&&&&&&&&&& 仅对构造函数有意义，对于new的User实例对象无意义。
&&&&&&&&&& function sayAge(){
&&&&&&&&&&&&&& alert(age);
&&&&&&&&&& }
&&&&&&&&&& sayAge();
//&&&&&& 共有属性： 共享内存。
&&&&&& User.prototype.school='zky';
//&&&&&& 共有方法：可访问公有属性。
//&&&&&&&&&&&&&&& 共享内存。
&&&&&& User.prototype.saySchool=function(){
&&&&&&&&&& alert(this.school);
&&&&&&&&&& alert(this.name);
&&&&&&&&&& alert(this.sex);
&&&&&&&&&& alert(age);
&&&&&&& var obj=new User();
//&&&&&& 静态属性：就是动态添加的实例属性。
&&&&&&& obj.sex='man';
//&&&&&& 静态方法：就是动态添加的实例方法。
&&&&&&& obj.saySex=function(){
&&&&&&&&&&& alert(this.sex);
&&&&&&&&&&& alert(this.name);
&&&&&&&&&&& alert(this.school);
&&&&&&&&&&& alert(age);
&&&&&&& };
//-----------------此处为分割线-----------------------------
////&&&&& 证明this关键字定义的属性和动态添加的属性本质上一样的，都可认为是实例对象的公有属性。
//&&&&&& 验证： this关键字定义的属性访问动态添加的属性
//&&&&&&& obj.sayName();//true
//&&&&&&& 验证：动态添加的属性访问this关键字定义的属性
//&&&&&&& obj.saySex();//true
//&&&&&&& 验证：公有属性访问私有属性
//&&&&&&& obj.sayName();//true
&&&&&&&&&& obj.saySex();//false
//&&&&&&& 验证：共享属性访问私有属性
//&&&&&&& obj.saySchool();//false
&& &/script&
&&& 测试文档
小伙伴们是否看明白了，了解了实例属性和原型属性了吗？本文讲述的非常的详细，推荐给大家，希望对小伙伴们能有所帮助
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具给对象添加属性----Prototype原型对象
给对象添加属性
1 Object 对象:Object是所有对象的基础，任何其他对象都是从Object扩展而来，或者说是继承。这一切都是由“原型”来完成。
2 原型对象：原型是对象的一个属性，也就是prototype内部的属性，每个对象都有这个内部属性，它本身也是一个对象。
3 得个对象都不直接包含具体属性。
4 那怎样给一个对象添加属性呢？
5 共享！ -----通过原型进行属性共享。
6 既然对象不直接包含属性，那它的属性从哪里来呢？
7 通过给原型添加属性，目标对象也可以获得该属性；
&!DOCTYPE html&
&meta charset="utf-8"&&title&Object对象&/title&
&script type="text/javascript"&Object.prototype.num = 50;/*添加原型属性*/alert("添加原型属性：" + Object.num);/*50*//*添加原型属性的同时，Object也获得了这个属性*/alert("对象属性："+Object.num);/*50*/Object.num =10;/*修改对象的属性，但原型的属性不变*/alert("修改对象属性："+Object.num);/*Object的属性num修改成：10*/alert(Object.prototype.num);/*但是原型还是50*//*这说明原型的属性(Object.prototype.num)与该对象的属性(Object.num)是彼此独立的*/
没有更多推荐了，jQuery源码研究分析学习笔记-jQuery原型属性和方法（九）
jQuery的一些其他原型属性和方法介绍：
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
selector: "",
jquery: "1.7.2",
length: 0,
size: function() {
return this.
toArray: function() {
return slice.call( this, 0 );
get: function( num ) {
return num == null ?
this.toArray() :
( num & 0 ? this[ this.length + num ] : this[ num ] );
pushStack: function( elems, name, selector ) {
var ret = this.constructor();
if ( jQuery.isArray( elems ) ) {
push.apply( ret, elems );
jQuery.merge( ret, elems );
ret.prevObject = this;
ret.context = this.
if ( name === "find" ) {
ret.selector = this.selector + ( this.selector ? " " : "" ) +
} else if ( name ) {
ret.selector = this.selector + "." + name + "(" + selector + ")";
each: function( callback, args ) {
return jQuery.each( this, callback, args );
ready: function( fn ) {
jQuery.bindReady();
readyList.add( fn );
return this;
eq: function( i ) {
return i === -1 ?
this.slice( i ) :
this.slice( i, i + 1 );
first: function() {
return this.eq( 0 );
last: function() {
return this.eq( -1 );
slice: function() {
return this.pushStack( slice.apply( this, arguments ),
"slice", slice.call(arguments).join(",") );
map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
end: function() {
return this.prevObject || this.constructor(null);
push: push,
sort: [].sort,
splice: [].splice
jQuery.each()方法是一个静态方法，是一个通用的遍历迭代方法，用于遍历对象和数组，对于数组和含有length属性的类数组对象，该方法通过下标遍历，从0到length-1;对于其他对象则通过属性名遍历，在遍历过程中，如果回回调函数返回false,则结束遍历
each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object );
if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
for ( ; i & ) {
if ( callback.apply( object[ i++ ], args ) === false ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
for ( ; i & ) {
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
return object;
jQuery.map(elems, callback, arg)是静态方法，主要对数组中的每个元素或对象的每个属性调用一个回调函数，并将回调函数的返回值放如一个新的数组中。执行回调函数时传入两个参数：数组元素或属性值，元素下标或属性名。关键字this指向全局对象window，回调函数的返回值会被放入新的数组中，
map: function( elems, callback, arg ) {
var value, key, ret = [],
length = elems.length,
isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length & 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;
if ( isArray ) {
for ( ; i & i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret[ ret.length ] = value;
for ( key in elems ) {
value = callback( elems[ key ], key, arg );
if ( value != null ) {
ret[ ret.length ] = value;
return ret.concat.apply( [], ret );
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？My program began in the third year of College
自定义对象、prototype原型属性
一、自定义对象
1、在javascript没有类的概念，只要有函数即可创建对象。
2、自定义对象的格式：
方式1： 使用无参的函数创建对象。
方式2：使用带参的函数创建对象。this表示当前对象。
方式3： 使用Object函数创建对象，javascript默认创建了一个 function Object(){}。
//类似方式1
var p = new Object()
p.id = 110
p.name = "铁蛋"
document.write("编号："+ p.id+" 姓名："+ p.name)
方式4：使用字面量的方式创建。
3、需求：编写一个js文件，在js文件中自定义一个数组工具对象，该工具对象要有一个找到最大值的方法，与找元素对应的索引值的方法。
1）js代码：
var tool = new ArrayTool();
function ArrayTool(){
this.getMax = function(arr){
var max = arr[0];
for(var i = 1 ; i&arr.i++){
if(arr[i]&max){
max = arr[i];
this.searchEle = function(arr,target){
for(var i = 0 ; i&arr. i++){
if(arr[i] ==target){
return -1;
2）html代码：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
src="ArrayTool.js" type="text/javascript"&&
type="text/javascript"&
var arr = [12,15,9,4];
var max = tool.getMax(arr);
document.write("最大值："+ max+"&br/&");
var index = tool.searchEle(arr,9);
document.write("找到的索引值是："+ index);
http-equiv="Content-Type" content="text/ charset=utf-8" /&
&无标题文档&
二、prototype原型属性：
1、有这样的一个需求：想把上诉的getMax与searchEle方法添加到数组对象中。
functoin Array(){
this.getMax = function(){
this.searchEle = function(){
2、Prototype注意的细节：
1）prototype是函数(function)的一个必备属性(书面一点的说法是”保留属性”)(只要是function,就一定有一个prototype属性)
2）prototype的值是一个对象。
3）可以任意修改函数的prototype属性的值。
4）一个对象会自动拥有prototype的所有成员属性和方法。
function Array(){
this.prototype = new Object();
Array.prototype.getMax = function(){
new Array();
3、作用：给一个方法追加一些功能，就可以使用prototy。（jquery中使用较多）
4、解决需求：
5、练习：给字符串对象添加一个toCharArray的方法，然后再添加一个reverse(翻转)的方法。
没有更多推荐了，js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别
时间： 18:59:38
&&&& 阅读：294
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&__proto__: 这个属性是实例对象的属性，每个实例对象都有一个__proto__属性，这个属性指向实例化该实例的构造函数的原型对象（prototype）。
proterty：这个方法是对象的属性。（据说和一个对象的attr类似，比如dom对象中）
prototype：每个构造函数都有一个prototype对象，这个对象指向该构造函数的原型。
对象自身属性方法和原型中的属性方法的区别: 对象自身的属性和方法只对该对象有效，而原型链中的属性方法对所有实例有效。
function baseClass(){
this.age = 12;//构造方法里面的age属性
this.showMsg = function(){//构造方法里面的showMsg方法
console.log("baseClass::showMsg");
baseClass.prototype.say = function () {//原型上定义的say方法
console.log(‘test‘);
baseClass.prototype.age = 23;//原型上定义的name属性
function extendClass(){};//extendClass新的构造方法
var b = new baseClass();//实例化一个baseClass
console.log(b,121212);//此时b对象包含了baseClass构造函数中的属性和方法，不包含baseClass原型上的属性和方法，原型中的属性和方法为所有实例所共享，　　　　　　　　　　　　　　　　　　//不会单独到实例化的对象身上，当在实例化对象中调用原型中的属性和方法时，可以通过原型链得到原型中的属性和方法（对象自身没有同名　　　　　　　　　　　　　　　　　　//属性和方法的前提下，否则是实例自身的属性和方法
extendClass.prototype =//把extendClass的原型指向实例化的b，即extendClass的原型中就具备了b对象所有的属性和方法
var instance = new extendClass();//实例化一个extendClass实例instance　　　　　//此时instance应该是一个空对象，但是后面赋值了，这里也有值（不知道为啥，按道理js是顺序执行的），instance.__proto__属性指向的是extendClass的原型对象,而　　　　　//extendClass.prototype等于baseClass构造函数的实例，所以最后instance.__proto__属性指向了baseClass构造函数,instance.__proto__.__proto__指向了　　　　　//最初的原型对象
instance.showMsg(); // 显示baseClass::showMsg
instance.name = ‘branchName‘;//instance实例的name属性
instance.age = 34;//instance实例的age属性
var instance2 = new extendClass();//实例化另一个extendClass对象instance2
instance.say();//say方法是最初原型对象的方法
baseClass.prototype.name = ‘xiugai‘;//修改最初原型对象的name属性，修改该属性会影响所有实例化队形（实例化对象自身没有该属性的情况下）
console.log(instance.name,instance.age);//name取的是instanace对象自身的name值‘branchName’，age同理
console.log(instance2.name,instance2.age);//instance取的是构造方法baseClass的原型对象上面的name值‘xiugai’，age取的同样是baseClass原型对象上的　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//age，值为‘12’
baseClass.prototype.name = ‘zaicixiugai‘;
console.log(instance2.name);//此时name变成了‘zaicixiugai’
var instance3 = new extendClass();
console.log(instance3);//instance3是一个空对象，它的原型链最终指向了baseClass的原型对象
给构造函数的prototype赋值的时候不能直接用
object.prototype = {}赋值，
如果这样赋值要加一行constructor属性，否则会覆盖掉object本身的原型指向。
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/zmj-blog/p/7112600.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！}