javascript 面试题

忘是亡心i 2022-10-01 03:57 137阅读 0赞

> 题在body部分  
>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title></title>
    	<script type="text/javascript">
    
    	/**方法一：基于dom属性
    	window.onload = function(){
    		var elements = document.getElementsByTagName("a");
    		var LIB_addEventListener = function(element, type, func, i){
    			element.addEventListener(type, func, false);
    			element.setAttribute("i",i);
    		}			
    		for (var i=0, ilen=elements.length; i<ilen; i++) {   
    		  var element = elements[i];   
    		  LIB_addEventListener(element, 'click', function(event) {   
    			alert('I was originally number ' + this.getAttribute("i")); 
    		  },i+1);
    		}
    	}	
    	*/
    	/**方法二：evel不推荐使用，虽然强大，但效率低
    	window.onload = function(){
    		var elements = document.getElementsByTagName("a");
    		var LIB_addEventListener = function(element, type, func){
    			element.addEventListener(type, func, false);
    		}			
    		for (var i=0, ilen=elements.length; i<ilen; i++) {   
    		  var element = elements[i];
    		  eval("var f=function(event){alert('I was originally number "+i+"');}");
    		  LIB_addEventListener(element, 'click', f);
    		}
    	}
    	*/
    	/**方法三：基于闭包
    	window.onload = function(){
    		var elements = document.getElementsByTagName("a");
    		var LIB_addEventListener = function(element, type, func){
    			element.addEventListener(type, func, false);
    		}			
    		for (var i=0, ilen=elements.length; i<ilen; i++) {   
    		  var element = elements[i];
    		  var fun = function(){
    		  	var j = i;
    		  	return function(event){alert('I was originally number '+j)};
    		  }
    		  LIB_addEventListener(element, 'click', fun());
    		}
    	}
    	*/
    	//方法四：基于event.target进行判断
    	/**
    	window.onload = function(){
    		var elements = document.getElementsByTagName("a");
    		var LIB_addEventListener = function(element, type, func){
    			element.addEventListener(type, func, false);
    		}			
    		for (var i=0, ilen=elements.length; i<ilen; i++) {   
    			var element = elements[i];
    			LIB_addEventListener(element, 'click', function(event){
    				for(var i = elements.length; i > 0; i--){
    					if(event.target === elements[i-1]){
    						alert(i);
    					}
    				}
    			});
    		}
    	}*/
    	//方法五：同方法三，都用的闭包
    	/**
    	window.onload = function(){
    		var elements = document.getElementsByTagName("a");
    		var LIB_addEventListener = function(element, type, func){
    			element.addEventListener(type, func, false);
    		}			
    		for (var i=0, ilen=elements.length; i<ilen; i++) {   
    			var element = elements[i];
    			LIB_addEventListener(element, 'click', (function(i){
    				 return function(e){
    					console.log(this)    //这里的this保存了处罚自身的dom
    					alert(i)
    				 };
    			})(i));
    		}
    	}*/
    	/**方法六：同方法三，都用的闭包
    		window.onload = function(){
    			var elements = document.getElementsByTagName("a");
    			var LIB_addEventListener = function(element, type, func){
    				element.addEventListener(type, func, false);
    			}			
    			for (var i=0, ilen=elements.length; i<ilen; i++) {   
    			  var element = elements[i];
    			  var fun = function(){
    				var j = i;
    				return function(event){alert('I was originally number '+j)};
    			  }
    			  LIB_addEventListener(element, 'click', fun());
    			}
    		}
    		*/
    	//方法七：同方法三，都用的闭包
    	window.onload = function(){
    		var elements = document.getElementsByTagName("a");
    		var LIB_addEventListener = function(element, type, func){
    			element.addEventListener(type, func, false);
    		}			
    		for (var i=0, ilen=elements.length; i<ilen; i++) {   
    		  var element = elements[i];
    		  LIB_addEventListener(element, 'click', (function(){
    			var j = i;
    			return function(event){alert('I was originally number '+j)};
    		  })());
    		}
    	}
    	
    	</script>
    </head>
    <body>  <h1>给每个a绑定一个click事件，让每次click弹出对应的index</h1>
    		<a href="#1">1</a>
    		<a href="#2">2</a>
    		<a href="#3">3</a>
    		<a href="#4">4</a>
    		<a href="#5">5</a>
    	
    </body>
    </html>

javascript 获取每个a链接对应的index。考察的内容有，dom元素、event.target、 closure  
          
        作用域是每个变量的作用范围，闭包就是作用域链的产物，window是最高层的作用域，从它往下一层一层的分；  
         
        作用域链就是从当前变量自身的作用域往上一直到window对象的作用域， 在这个作用域链上的变量都可以被当前变量引用。  
         
        原型可以理解为类，一个对象的原型相当于用来实例化它的类， javascript中所有的对象都是从Object对象派生的， 所以Object对象在所有对象的原型链的最底部。  
         
        dom elem原型链，  在DOM标准中，每个HTML元素都是继承自HTMLElement，HTMLElement相当于Object，HTML的元素就是HTMLElement，也就是每个dom元素，都是Object，但是在ie中HTMLElement对象是隐藏的，代码访问不了。  
         
        dom又称为文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口