文档章节

javascript原型和多维数组遍历

指尖残雪
 指尖残雪
发布于 2016/05/22 23:56
字数 1372
阅读 7
收藏 0
我们创建的每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
原型对象实际就是一个构造函数的实例对象,与普通的实例对象没有什么本质上的区别,js中每一个对象都有一个原型对象。不过他比较特殊,该对象所包含的所有属性和方法能够供构造函数的所有实例共享,这就是其他语言所说的继承,而javascript通过原型对象来实现继承,简称原型继承。静态原型继承:Object.prototype.[method field] ;
isPrototypeOf(实例对象) 判断原型的方法
ECMA5: Object.getPrototypeOf():根据实例对象获得原型对象
object.hasOwnProperty(attribute) 判断属性是否属于对象本身
in 操作符 判断对象中是否存在该属性(无论是实例对象还是原型对象)
ECMA5新特性 Object.keys();拿到当前对象里的所有keys 返回一个数组

ECMA5新特性 Object.getOwnPropertyNames 枚举对象所有的属性 :不管该内部属性能否被枚举


代码示例:

function Person(){                                    
	                                                  
}                                                     
var obj = Person.prototype;                           
alert(typeof obj);                                    
obj.name = 'z3';                                      
obj.age  = 20 ;                                       
obj.sayName = function(){alert(this.name);};          
var p1 = new Person();                                
var p2 = new Person();                                
alert(p1.age);                                        
alert(p2.age);                                        
p1.sayName();                                         
p2.sayName();                                         
alert(p1.sayName == p2.sayName)
obj是Person的原型,p1和p2使用共同的原型。alert(p1.sayName == p2.sayName)  输出结果为true;

构造函数.prototype =  原型对象   
原型对象.constructor = 构造函数  

alert(obj.constructor);   

输出结果:

function Person(){        
                     
}                         

实例对象 prototype 是 原型对象    

isPrototypeOf(new instance); 判断原型的方法

alert(obj.isPrototypeOf(p1));  //obj是p1的原型



ECMA5: Object.getPrototypeOf():根据实例对象获得原型对象

function Person(){                                                           
	                                                                         
}                                                                            
                                                                             
Person.prototype.name = 'z3';                                                
Person.prototype.age  = 20 ;                                                 
Person.prototype.sayName  = function(){alert('我是原型对象的方法!')};                 
                                                                             
                                                                             
var p1 = new Person();                                                       
alert(p1.name); // z3                                                        
var prototypeObj = Object.getPrototypeOf(p1);                                
alert(prototypeObj == Person.prototype);
输出z3和true;

每次代码读取一个对象的属性的时候: 首先会进行一次搜索:搜索实例对象里name的属性,看看有没有,如果没有,再去p2的实例所对应的原型对象里去搜索name属性 如果有就返回 没有返回undefined     

var p2 = new Person();                      
p2.name = 'w5';		// 实例对象的name                                        
alert(p2.name);		// 就想获得原型对象的name属性
输出w5,我们把p2.name删除掉

var p2 = new Person();                      
p2.name = 'w5';		// 实例对象的name            
delete p2.name ;                            
alert(p2.name);		// 就想获得原型对象的name属性
输出z3
判断一个对象属性 是属于原型属性 还是属于实例属性

function Person(){                                            
	                                                          
}                                                             
                                                              
Person.prototype.name = 'z3';                                 
Person.prototype.age  = 20 ;                                  
Person.prototype.sayName  = function(){alert('我是原型对象的方法!')};  
var p3 = new Person();                
//p3.name = 'z6';                     
alert(p3.name);                       
alert(p3.hasOwnProperty('name'));
输出结果:z3和false。由于我们把p3.name = 'z6';  注释掉以后,name是属于原型属性。p3.name = 'z6';是属于实例属性。

in 操作符 判断属性是否存在于 实例对象和原型对象中 

function Person(){                                           
	                                                         
}                                                            
                                                             
Person.prototype.name = 'z3';                                
Person.prototype.age  = 20 ;                                 
Person.prototype.sayName  = function(){alert('我是原型对象的方法!')}; 
var p1 = new Person();                     
alert('name' in p1); // true               
var p2 = new Person();                     
p2.name = 'w3';                            
alert('name' in p2); // true
都输出true,说明in 操作符 判断属性是否存在于 实例对象和原型对象中 

通过以上方法我们可以自己写一个方法,断一个属性是否存在原型中 

当不属于实例属性只属于原型属性时候返回true。

// 在原型对象中 是否存在这个属性 第一个参数:当前对象 ,第二个参数:要判断的属性                          
                                                                     
function hasPrototypeProperty(object , name){                        
	return !object.hasOwnProperty(name) && name in object ;          
}                                                                    
                                                                     
var p3 = new Person();                                               
//p3.name = 'xiao A';                                                  
alert(hasPrototypeProperty(p3,'name'));
p3.name = 'xiao A';    注释后name是只属于原型中,所以返回true,当不注释的时候,name是实例属性,返回false

ECMA5新特性 Object.keys();  拿到当前对象里的所有keys 返回一个数组 

var p1 = new Person();               
p1.name = 'z3';                      
p1.age = 20 ;                        
                                     
var attributes = Object.keys(p1);    
alert(attributes);
输出:name,age

var attributes2 = Object.keys(Person.prototype); 
alert(attributes2);
输出:name,age,sayName

ECMA5 constructor属性: 该属性是不能被枚举的[eable = false]       
如果想要被枚举,使用Object.getOwnPropertyNames,枚举对象所有的属性 :不管该内部属性能否被枚举   

var attributes3 = Object.getOwnPropertyNames(Person.prototype);    
alert(attributes3);
输出:constructor,name,age,sayName


一维数组的遍历:

ECMA5 forEach 循环遍历数组的每一项(只适合遍历一维数组)

var arr = [1,2,3,[4,5]];                        
arr.forEach(function(item , index , array){   
	alert(item);                              
});
输出:

1

2

3

4,5

自己实现一个Array each方法 能遍历多维数组  

var arr = [1,2,3,[4,[5,[6]]]]; // arr.length                                        
                                                                                    
Array.prototype.each = function(fn){                                                
	try{                                                                            
		//1 目的: 遍历数组的每一项 //计数器 记录当前遍历的元素位置                                          
		this.i || (this.i=0);  //var i = 0 ;                                        
		//2 严谨的判断什么时候去走each核心方法                                                     
		// 当数组的长度大于0的时候 && 传递的参数必须为函数                                               
		if(this.length >0 && fn.constructor == Function){                           
			// 循环遍历数组的每一项                                                           
			while(this.i < this.length){	//while循环的范围                            
				//获取数组的每一项                                                          
				var e = this[this.i];                                               
				//如果当前元素获取到了 并且当前元素是一个数组                                            
				if(e && e.constructor == Array){                                    
					// 直接做递归操作                                                      
					e.each(fn);                                                     
				} else {                                                            
					//如果不是数组 (那就是一个单个元素)                                            
					// 这的目的就是为了把数组的当前元素传递给fn函数 并让函数执行                               
					//fn.apply(e,[e]);                                              
					fn.call(e,e);                                                   
				}                                                                   
				this.i++ ;                                                          
			}                                                                       
			this.i = null ; // 释放内存 垃圾回收机制回收变量                                      
		}                                                                           
		                                                                            
	} catch(ex){                                                                    
		// do something                                                             
	}                                                                               
	return this ;                                                                   
}                                                                                   
                                                                                    
arr.each(function(item){                                                            
	alert(item);                                                                    
});

本文转载自:http://blog.csdn.net/bq1073100909/article/details/48750597

共有 人打赏支持
指尖残雪
粉丝 7
博文 73
码字总数 0
作品 0
上海
后端工程师
前端高频面试题 JavaScript篇

以下问题都来自于互联网前端面经分享,回答为笔者通过查阅资料加上自身理解总结,不保证解答的准确性,有兴趣讨论的同学可以留言或者私信讨论。 1.JS的异步机制? 2.闭包如何实现? 3.原型链、...

大雄的学习人生
06/25
0
0
javascript模式 读书笔记一

第一章 简介 模式 模式是指一个通用问题的解决方案。 模式分三种 设计模式 编码模式:javascript特有的 反模式:常见的 引发的问题比解决的问题更多的一种方法。 JavaScript:基本概念 面向对...

lilugirl
2014/01/21
0
1
js常见基础对象属性方法(一)

js常见基础对象属性方法 Object.keys() Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历改对象时返回的顺序一致(两...

孟飞阳
07/17
0
0
javascript语言精粹 读书笔记

这是我目前度过最好的js方面的书,小而精,没有一句废话全是精华。想要全面理解javascript,这本书必读。 P6 避免使用 / /注释 建议使用// P17 对象字面量是一种方便指定新对象的表示方法。属...

lilugirl
2014/01/16
0
3
5 分钟掌握 JavaScript 实用窍门

简评:一开始 JavaScript 只是为网页增添一些实时动画效果,现在 JS 已经能做到前后端通吃了,而且还是年度流行语言。本文分享几则 JS 小窍门,可以让你事半功倍 ~ 1. 删除数组尾部元素 一个...

06/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Akka的Actor生命周期《Eight》译

Actor在创建时出现,然后在用户请求时停止。每当一个Actor停止时,它的所有孩子也会被递归停止。此行为极大地简化了资源清理,并有助于避免资源泄漏,例如由打开的套接字和文件引起的资源泄漏...

woshixin
8分钟前
0
0
Python 线程 条件锁 生产者消费者模型

创建多个生产者和消费者,并且加上条件锁,避免线程冲突 import threadingfrom threading import Threadfrom threading import Conditionimport timeimport randomc = Conditi...

阿豪boy
25分钟前
0
0
【七】组合Action

本章描述了常用定义Action的方法。 自定义action builders 我们在action一章已经看过如何声明一个action——有request parameter、无request parameter、有body parser等等。你可以在 asynch...

Landas
41分钟前
0
0
Spring Boot实战之基础回顾

本文作者: 吴伟祥 本文链接: https://wuweixiang.cn/2018/08/21/Spring-Boot实战之基础回顾/ 版权声明: 本博客所有文章除特别声明外均为原创,采用CC BY-NC-SA 4.0 许可协议。转载请在文章开...

吴伟祥
41分钟前
0
0
OAuth认证开发

提示: 以下测试是基于项目安装成功,初始化数据库(initial_db.ddl, oauth.ddl, initial_data.ddl)后的测试, 也可在页面上点击"client_details"菜单里进行测试 方式1:基于浏览器 (grant_type=...

舒文joven
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部