solar

solar 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

coder,colder

个人动态

solar 回答了问题 · 2017-07-06

解决如何找到数组对象中某一个属性为指定属性值的对象 然后push到新的数组中

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

关注 5 回答 4

solar 回答了问题 · 2017-01-06

js 注册事件机制问题

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

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

关注 5 回答 2

solar 关注了问题 · 2017-01-06

js 注册事件机制问题

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');
     }
   }

关注 5 回答 2

solar 关注了问题 · 2017-01-05

js prototype 定义作用

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

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

关注 3 回答 3

solar 回答了问题 · 2017-01-05

js 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?

关注 3 回答 3

solar 关注了问题 · 2016-12-22

JS获取页面节点,并将其放入新的节点内的问题

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

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:
clipboard.png就一串这些。这是为什么呢?那么要如何能够实现生产页面元素内部子节点呢?难道需要获取Arr[i]内的字符串来拼接成节点?

关注 3 回答 2

solar 回答了问题 · 2016-12-22

JS获取页面节点,并将其放入新的节点内的问题

clipboard.png

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

关注 3 回答 2

solar 回答了问题 · 2016-12-22

JavaScript获取到的位置有错

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

关注 3 回答 2

solar 关注了问题 · 2016-12-22

JavaScript获取到的位置有错

高德地图和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

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

关注 3 回答 2

solar 回答了问题 · 2016-12-22

vue2 this 问题

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

关注 3 回答 2

认证与成就

  • 获得 170 次点赞
  • 获得 15 枚徽章 获得 1 枚金徽章, 获得 4 枚银徽章, 获得 10 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-01-20
个人主页被 923 人浏览