面試總結篇(一)

一、this的指向問題:html

(1)  定義的function中的this指向的是windowdom

如:函數

function aaa(){flex

console.log(this)   ----->windowui

}this

或者是內嵌的函數:spa

var aaa={prototype

    vvv:function(){scala

        function bbb(){code

           console.log(this)   ---->window

        }

    }

}

 

 

(2)、一個實例的this指向,指向是他的自己

一、function Aaa(){ this.bbb=1111; console.log(this); }
Aaa.prototype.say=function(){
console.log(this)
}
var bbb=new Aaa(); //this ---Aaa {bbb: 1111}
bbb.say(); //this ---Aaa {bbb: 1111}
new Aaa(); //this ---Aaa {bbb: 1111}

(2)引用類型  function的額外使用方法
var ccc=function(){};
ccc.aaa=function(){
    console.log(this)   //----->  function(){}
}
ccc.aaa();
典型案例:
    function Print(){
        var aaa=function(){ return { Print:function(){ console.log(123) } } } aaa.Print=function(){ console.log(321); console.log(this); //----- fuction (){ return {....}} return this; } return aaa } Print()().Print() //123 Print().Print()() //321
 

 

二、+new Date() == new Date().getTime();

 

 

三、Dom0級事件與Dom1級事件有什麼區別;

一、事件的捕獲到事件的冒泡;

 

事件是從事件捕獲在到事件冒泡的一個過程;

html----body  ----div  ----body----html

(1)dom0級事件:

<div id="aaa" onclick="bbb()">222</div>

<script>

function bbb(){
console.log('aaa');
}
document.getElementById('aaa').onclick=function ddd(){
console.log('12333111');
}

</script>

 

執行結果 :  12333111

dom1事件

document.getElementById('aaa').addEventListener('click',function(e){
console.log(12333);
},false)
document.getElementById('aaa').addEventListener('click',function(){
console.log(12333)
},false)
document.getElementById('aaa').addEventListener('click',function(){
console.log(12333)
},false)

執行結果:

12333
12333
12333

 

區別:dom1事件進行addEventListener綁定的事件能夠一一觸發,dom級事件事件覆蓋只剩一個;

addEventListener的第三個參數 設置爲true,則是捕獲的過程,能夠進行阻止事件的觸發;例如

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="flexible.js"></script>
</head>
<body id="bbb">
<div id="aaa" onclick="bbb()">1221</div>
<script>
    function bbb(){
        console.log('aaa');
    }
    document.getElementById('aaa').onclick=function ddd(){
        console.log('12333111');
    }
    document.getElementById('bbb').addEventListener('click',function(e){
        e.stopPropagation();
        console.log('body');
    },true)
    document.getElementById('aaa').addEventListener('click',function(e){
        console.log(12333);
    },false)
    document.getElementById('aaa').addEventListener('click',function(){
        console.log(12333)
    },false)
    document.getElementById('aaa').addEventListener('click',function(){
        console.log(12333)
    },false)
</script>
</body>
</html>

 

執行結果:

body

 (3)

bind(做用域,argument1,argument2)

eg:

   var aaa={
       bbb:function(aaa,ccc){
         return this.bbb+aaa+ccc;
       }
   }

   var ccc=aaa.bbb.bind({bbb:111},12,13);
   console.log(ccc());
相關文章
相關標籤/搜索