Article Detail

简说javascript的this的指向4个运用场景

认识this指向 this的运用场景有以下几个： 1.函数调用 2.对象的方法调用 3.构造函数调用 4.call和apply调用一、函数调用 window....

HTML 阅读 58.1万 4 分钟阅读 2017-09-19 11:26

认识this指向

this的运用场景有以下几个：
1.函数调用
2.对象的方法调用
3.构造函数调用
4.call和apply调用

一、函数调用

    window.word = "this is global";
    function aa(){   
        console.log(this.word)
    }
    function bb(){
       var word = "this is bb"
        aa();
    }
    bb();

运算结果是 this is global。
可以看到当作为函数调用的时候，this指向的是window对象。

二、对象方法调用

var car = {
        name : "BMW",
        price : "200000",
        showName:function(){
            console.log(this.name);
        },
        showPrice:function(){
            console.log(this.price)
        }
    }
    car.showName();
    car.showPrice();

运算结果是：BMW 200000。
可以看到当作为对象方法调用的时候 this指向的是car本身。

三、构造函数调用

构造函数和普通函数一模一样，区别在于调用方式，当用new运算符调用时，函数会返回一个对象，而构造器的this就指向了这个返回对象

function Car(){
        this.name = "BMW";
        this.price = "200000";
        this.showPrice = function(){
            console.log(this.price);
        }
    }
    var car = new Car();
    car.showPrice();

运算结果是 200000。
由此可知，这里的this指向的是car这个对象。

四、call和apply

function Car(){
        console.log(this.name);
    }
    var bmw = {
        name:"BMW",
        showName:function(){
            Car.apply(this);
        }
    }
    bmw.showName();

运算后得到：BMW 。
这里通过apply（call也可以）强制把this指向了bmw这个对象。

Comments 评论区

广西南宁市 2017-09-19 11:31

DOM操作相关事件和方法

1. 获取元素方法

        1.根据 id
                var element = document.getElementById("idName");

        2.根据 标签名
                var elements = document.getElementsByTagName("标签名");

        3.根据 类名
                var elements = document.getElementsByClassName("类名");

        4.H5新增 获取方法
                document.queryselector("");
                document.queryselectorAll("");

        5.获取 body 元素
                document.body

2. 事件

        1.点击事件(双击事件ondblclick)
                ele.onclick = function(){};

        2.鼠标事件
                1.鼠标悬浮(经过) ele.onmouseover = function(){};

                2.鼠标离开 ele.onmouseout = function(){};

        onmouseenter和onmouseleave是DOM2的方法, 有兼容问题

        onmouseover  鼠标经过盒子的时候执行1次

        onmousemove  鼠标只要移动的时候就会执行
                
                3.鼠标按下 ele.onmousedown = function(){};

                4.鼠标弹起 ele.onmouseup = function(){};
                
                5.鼠标滚动 ele.onmousewheel = function(){};

        3.焦点事件
                1.失去焦点 ele.onblur = function(){};

                2.获得焦点 ele.onfocus = function(){};

                3.输入事件 ele.oninput = function(){};
        
                onkeyup和oninput  联想搜索

                4.内容发生改变 ele.onchange = function(){};
                
                一般做验证或者下拉框选择会使用onchange

        4.键盘事件

                1.键盘键入 ele.onkeydown = function(){};

                2.键盘弹起 ele.onkeyup = function(){};

                3.键盘按下 ele.onleypress = function(){};

                onkeydown优先于onkeypress执行

                onkeypress不识别系统按键

                onkeypress区分大小写

        5.window 事件

                1.键盘事件 event.keyCode
                键盘对应的编码

                2.页面滚动 window.onscroll = function(){};
        
                window.scroll必须有滚动条才触发, 一般配合$(window).scrollTop()

                window.onmousewheel / document.onmousewheel无论有没有滚动条都能触发
        
                3.窗口大小变化 window.onresize = function(){};

3. 字符串 相关方法

        1.replace() 字符串替换

                xxx = xxx.replace(searchValue, replaceValue);

                只找第一个匹配的替换

        2.indexOf() --- lastIndexOf() 搜索(找到 对应的 返回位置) 
                一个参数从第一个找
                两个参数从指定的位置找
                不存在返回 -1, 查找的是""返回 0

        3.trim() 删除左右空格 

        4.split("") 字符串 转换成 数组  引号里确定用什么分割

        5.charAt() 获取指定位置处字符

        6.slice()  从start位置开始，截取到end位置，end取不到

        7.substring() 从start位置开始，截取到end位置，end取不到

        8.substr()    从start位置开始，截取length个字符

        9.toUpperCase()  str转换为大写

        10.toLowerCase()  str转换为小写

4.数组 相关方法

        1.join("") 数组 转换成 字符串 引号里确定用什么拼接(默认逗号) 

        2.toString() 数组 转换为 字符串 (去掉[])

        3.valueOf() 返回数组对象本身

        4.Array.isArray(xxx) 检测xxx是否是数组

        5.xxx instanceOf Array 检测xxx是否是数组

        6.push() pop()  从后边增删

        7.unshift() shift() 从前边增删

        8.reverse() 翻转数组

        9.slice() 从数组中截取一部分内容

        10.splice() 从数组中删除或替换数组中的一部分
        
        11. xxx.indexOf()  寻找指定元素在数组中的位置,如果没找到返回-1 

        12. xxx.lastIndexOf()  从后面找

        13.xxx.filter(function(){ }) 迭代过滤/筛选

        14.xxx.forEach(function(){ }) 遍历

        15.xxx.map(function(){ }) 映射

        16.xxx.some(function(){ }) 数组中至少有一个数据符合要求

        17.xxx.every(function(){ }) 数组中所有数据符合要求

        18.concat() 把一个数组和另一个数组拼接在一起

        19.sort() 进行冒泡排序 b-a倒序 a-b升序

#⁰

广西南宁市 2017-09-19 11:36

javascript中的this和e.target的深入研究
this 是javascript的一个关键字，当函数运行时在内部自动生成。this是会变化的，在不同的场合，代表的东西就不一样。简单点来说，this指调用这个函数的对象。当你使用this代表的当前html元素，这样你就可以使用这个元素的属性和方法呢。
e.target 中的e是可以自己随意取名的，现在关键讲的是target。简单点说就是触发这个事件的目标元素。它和this的区别就在于this是会变得，而target是不会变得，target的认定了目标就不会发生变化了。this其实就等于e.currentTarget.

广西南宁市2017-09-19 11:37:04

this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象

广西南宁市2017-09-19 11:37:38

$(this)是触发执行当前函数块（事件处理函数）最内层（距离最近的）的jQuery对象，在你的代码中就是触发了mouseover事件的对象。
　　function(e)中的参数e是事件对象，根据事件的不同，具有对应的子属性，比如键盘事件和鼠标事件等，你的代码中对应的是鼠标事件。

广西南宁市2017-09-19 11:40:47

.click(function(event) 中的event ，是什么意思？

$('#video_popup .close').click(function(event) {
event.preventDefault();
$('#video_popup').hide();
});

请各位大哥详细分析？
click(function(event) 中的event是事件对象的意思，event这里因为是单击，就是mouseEvent(鼠标事件)。
event.preventDefault();这是阻止默认事件，比如在浏览器中点击右键，会弹出一个菜单，加了这句之后就不会弹出这个菜单了，还有单击链接，会跳到相应的地址，加了这句就不会跳转了，这句等效于return false。

广西南宁市2017-09-19 11:42:49

input.onclick = function (evt) { //接受 event 对象，名称不一定非要 event  
    alert(evt); //MouseEvent，鼠标事件对象 IE不支持   但是IE中，不支持直接接收，而是通过window.event来接收。
};

#⁰

广西南宁市 2017-09-19 17:48

使用闭包的注意点
1.对捕获的变量只是个引用，不是复制；

function f() {
        var num = 1;

        function g() {
            //函数f()被执行之后，运行到此行，g.Scope =>f.LE;
            alert(num);
        }

        num++;
        g();//当函数g()第一次被执行时，f.LE里num=2；
    }
    f();//弹出2；说明弹出的num是对f.LE里num的引用，而不是复制

2.父函数每调用一次，都会创建一个新的词法环境，会产生不同的闭包；

function f() {
       var num = 1;
       return function () {
           num++;
           alert(num);
       }
    }
    var result1= f();//f()第一次被调用，创建了一个新的词法环境 result1.Scope => f.LE

    result1();//2
    result1();//3

    var result2 = f();//f()第二次被调用，又创建了一个新的词法环境 result2.Scope => f.LE

    result2();//2
    result2();//3

3.循环中问题

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>

for(var i = 0;i<=3;i++){
    //因为JS中没有块级作用域的概念，所以代码扫描到for循环这里时，
    //i是一个全局变量，并且，i=4；for循环只是给ele循环绑定了点击事件；
    //也就是说，onclick事件没有执行的时候，i的值已经是4了
    var ele = document.getElementById("i");
    ele.onclick = function () {
        alert(i);//所以当点击时，都弹出4
    }
}

应用闭包

var i;
    for(i =1;i<=3;i++){
        var ele = document.getElementById(i);
        ele.onclick = (function (id) {
            return function () {//return一个函数给onclick事件
                alert(id);//捕获父函数的id的值
            }
        })(i);//循环第一次的时候，i=1，立即调用，产生一个闭包，将i作为参数传入，依次
    }

#⁰

广西南宁市 2017-09-26 09:11

this的三个要点
1.this的指向是什么？
指向对象

2.this可以书写在哪里？
可以写在全局，也可以写在函数里
三种写在函数里的方式：

2.1 this可变

function f() {
        this.name = "sun";
    }

2.2 this可变

var o = {
        name: "sun",
        print: function () {
            console.log(this.name);
        }
    };
o.print();// sun
var f = o.print;//调用
f();//undefined;window.f(),现在是window调用的f()函数

2.3 this不可变

var ele = document.getElementById("id");
    ele.addEventListener("click",function () {
        console.log(this);//永远指向ele
    })

3.this指向对象的原则

3.1 运行时决定

3.2 运行在全局时，永远指向window；
　　运行在函数时，函数是谁调用的就是指向谁；

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。