var arr1 = arr.filter(function(item){
    return item.age === 2;
})

在html中定义的onclick的值是字符串，而onclick浏览器会尝试把它当函数，于是会使用类似eval的方式去执行这段字符串。为啥不是指向方法就是因为从字符串是没法得到同名函数的，除非你知道函数属于哪个对象，然后通过中括号的方式得到函数。所以html里面不能写成函数名的字符串。

而js中你用ele.onclick = showMsg();这个的含义是把showMsg()的调用值赋值给onclick，得到的结果当然不和预期，onclick的值只能是函数或可执行的代码。

js 注册事件机制问题

不是很明白为啥在

1. 在 html 中调用 onclick 方法时, 需要写成 onclick="showMsg()", 而不是 onclick="showMsg"

2. 在 js 中调用 onclick 时, 需写成 msg2.onclick = showMsg, 而不是 msg2.onclick = showMsg()

源码:

  <div id="row">

    <!--right-->
    <p id="msg1" onclick="showMsg()">click me</p>
    
    <!--error-->
    <!--<p id="msg1" onclick="showMsg">click me</p>-->
    <p id="msg2">click me too</p>
  </div>

js:

    var row = document.getElementById('row');
    var msg1 = document.getElementById('msg1')
    var msg2 = document.getElementById('msg2')
    
    // right
    msg2.onclick = showMsg
    
    // error
    msg2.onclick = showMsg()
    
   function showMsg (e) {
     if (e && e.target) {
      console.log(e.target)
     } else {
       console.log('click msg1');
     }
   }

var index = function(){};
index.prototype = {
    btnActive: function (){@#￥%……&*#￥%……}，
    roleHover: function (){@#￥%……&*#￥%……}
}
index.prototype.constructor = index;
var index = new index();
index.btnActive();
index.roleHover();

请问一下定义一个函数之后 再去定义函数的prototype 是有什么作用？
然后最后几句也还没看懂什么意思
求高手解答一下

回答你这个问题需要具备几点知识

1. prototype是用来做什么的？

2. 原型链查找

3. 原型链和prototype的关系

首先说第一个，prototype在ECMAScript标准里明确说明了设计prototype的用途的，它是用来实现实例间的属性共享和基于原型的继承的。这里不谈继承，只谈前者。什么是属性共享哦?你可能会这么问。这么说吧，如果定义了一个类（音乐播放器类Player），这个类的实例(ipod)都有播放，暂停等方法(方法是特殊的属性，它的属性值是函数是一般叫方法)，这些方法都是使用播放器实例的东西来实现音乐的播放。所有的播放器的这两个方法都干的是几乎相同的事，唯一的不同就只是因为是不同的播放器(实例)而造成的。如果不存在共享属性，则每个播放器都有自己的播放暂停方法，在内存里面就有多少播放器就会有多少播放暂停的方法。这样就消耗了大量的内存来存储这些方法，为了节省这部分内存，所以设计了prototype来实现属性共享。至于为什么prototype就实现了，需要后面2个知识点。且听我慢慢道来。

第二点，原型链查找.
当访问一个实例对象的属性或方法时，是判断实例本身是否含有这个属性或方法，如果存在，则直接返回这个属性的值，如果没有，则在这个对象的[[proto]]属性的值上查找是否有这个属性或方法，以此类推，直到找到或[[proto]]属性的值为null为止。这个[[proto]]在浏览器里以前是隐藏属性，现在部分浏览器开放了这个属性，它就是__proto__(前后各2个下划线)，任何typeof值为'object'的都有__proto__属性，除了null。这是原型链是有限的重要依据.

第三点，原型链和prototype的关系
从第二点可以看出，如果一个变量a的typeof值为'object',且它不是null,则它有__proto__属性，换句话说就是任何非null对象都有__proto__。prototype不是任何对象都有的，prototype是函数才具备的，任何一个函数，定义之后，都会拥有prototype属性，这个属性的值默认是个对象，且这个对象默认就拥有2个属性constructor, __proto__。也就是说如果你定义了一个函数A，则
A.prototype = { constructor: A, __proto__: Function.prototype }
当然可能还有别的默认属性，这里只列举了和题干相关的属性。说了大堆，你发现是不是还没有进入正题？
OK，马上来。原型链__proto__和prototype的关系。若果var a = new A();
则a.__proto__ = A.prototype，就这个关系。

上面你的代码里面，你直接对原prototype属性赋予了另外一个对象，这时会覆盖默认的prototype，从而断掉函数的原型到函数的原有的关系，即A.prototype.constructor不再指向A了，从而从原型里面再也不能找回函数本身了。造成的后果就是这个函数A之后生成的实例都不知道自己的构造函数是什么了，就像孩子生出来之后不知道爹是谁了一样，所以后面需要补回这个。你可能会问，为啥__proto__就用补回呢？因为覆盖原__proto__造成的影响远不如constructor的大，且__proto__这个属于浏览器私有属性，部分浏览器并未开放的。

下面补坑(prototype实现属性共享)
首先，prototype的值只是一个对象，在内存里只有一份，回到上面的播放器类(Player)和播放暂停方法(play, pause)。首先得到一个播放器实例var ipod = new Player('ipod');
这时ipod变量的值应该是

{
    // ipod.__proto__ = Player.prototype;
    // 下面是补全的代码，实际上__proto__的值只是一个引用(占据的内存可以忽略不计).
    __proto__: {
        play: function () {},
        pause: function () {}
    }
}

当访问ipod.play()时，由于在ipod上找不到，然后从原型链上找到play方法。也就是说prototype上的方法在ipod上都能访问到，除非ipod上定义了同名的属性(属性覆盖)。在外部看起来就像是play也是ipod的属性一样。这样便保证了属性能添加到实例上，至于有没有节约内存呢？答案是有的，比如再来一个实例var mp3 = new Player('mp3');
如果ipod的play和mp3的play占据不同的内存，则ipod.play === mp3.play会为false，但实际上比较的结果是true。

如果把play或pause写到构造函数内部的this属性上，则ipod.play === mp3.play的值就是false，说明它们占据了不同的内存空间。

understand?

题目需求是这样的：页面上有一组图片，我点击其中一张图片，在另一个元素内生成这些图片，但是新生成的这组图片虽然内容一样，但是其顺序却发生了变化--例如：我选中了第二张图片，那么新生成的这组图片应该以第二张图片开始，依次排序，直到最后一张图片的时候，再接上前面的第一种图片。不知道我的意思大神们明白没有，代码如下：

var list=document.getElementsByClassName("list_item");//获得原图片组
var run_are=document.getElementsByClassName("run_are")[0];//这是目标元素
for (var i=0,len=list.length;i<len;i++) {
                (function(i){
                    list[i].onclick=function(){
                        var Arr=[];//创建新图片组
                        for(var z=0;z<len;z++){
                            if(z>=i&&z<len-1){//压入后半部分
                                Arr.push(list[z-i]);
                            }else if(z<i){
                                Arr.push(list[z+i]);//压入前半部分
                            }
                        }
                        paint(Arr);
                    }
                })(i);
            }
function paint(){
                for (var i=0,len=Arr.length;i<len;i++ ) {
                    run_are.innerHTML=Arr[i];//放入目标元素
                }
            }

问题来了：打开页面元素run_are，就一串字符串：[object HTMLLIElement]。也不报错，输出Arr：
就一串这些。这是为什么呢？那么要如何能够实现生产页面元素内部子节点呢？难道需要获取Arr[i]内的字符串来拼接成节点？

改为run_are.appendChild(Arr[i].clone());
但是这样的话，绑定的事件也会被一起移入，所以还是推荐用事件委托去绑定事件

navigator.geolocation得到的坐标是按wgs84标准来的，高德的坐标系貌似是按gcj02标准来的，你需要转换下才能判断是否是准确的。

高德地图和JavaScript调用navigator.geolocation 方法获取所在位置的经纬度，发现都在杭州（本人在宁波）。

贴上代码

navigator.geolocation.getCurrentPosition(

    function (pos) { // 如果成果则执行该回调函数
        alert(
            '  经度：' + pos.coords.latitude +
            '  纬度：' + pos.coords.longitude +
            '  高度：' + pos.coords.altitude +
            '  精确度(经纬)：' + pos.coords.accuracy +
            '  精确度(高度)：' + pos.coords.altitudeAccuracy +
            '  速度：' + pos.coords.speed
        );
    }, function (err) { // 如果失败则执行该回调函数
        alert(err.message);
    }, { // 附带参数
        enableHighAccuracy: false, // 提高精度(耗费资源)
        timeout: 3000, // 超过timeout则调用失败的回调函数
        maximumAge: 1000 // 获取到的地理信息的有效期，超过有效期则重新获取一次位置信息
    }
);

获取到的经纬度30.267443,120.152792

以上情况是用谷歌浏览器手机模拟出现的，如果不用手机模拟，高德地图获取到的位置是正确的。

()=>{} 等价于 function(){}.bind(this);