简说javascript的this的指向4个运用场景
发布时间：2017-09-19, 11:26:50 分类：HTML | 编辑 off 网址 | 辅助
正文 1370字数 558,230阅读
认识this指向
this的运用场景有以下几个：
1.函数调用
2.对象的方法调用
3.构造函数调用
4.call和apply调用
this的运用场景有以下几个：
1.函数调用
2.对象的方法调用
3.构造函数调用
4.call和apply调用
一、函数调用
运算结果是 this is global。
可以看到当作为函数调用的时候，this指向的是window对象。
window.word = "this is global";
function aa(){
console.log(this.word)
}
function bb(){
var word = "this is bb"
aa();
}
bb();Run code
Cut to clipboard
运算结果是 this is global。
可以看到当作为函数调用的时候，this指向的是window对象。
二、对象方法调用
运算结果是：BMW 200000。
可以看到 当作为对象方法调用的时候 this指向的是car本身。
var car = {
name : "BMW",
price : "200000",
showName:function(){
console.log(this.name);
},
showPrice:function(){
console.log(this.price)
}
}
car.showName();
car.showPrice();Run code
Cut to clipboard
运算结果是：BMW 200000。
可以看到 当作为对象方法调用的时候 this指向的是car本身。
三、构造函数调用
构造函数和普通函数一模一样，区别在于调用方式，当用new运算符调用时，函数会返回一个对象，而构造器的this就指向了这个返回对象
运算结果是 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();Run code
Cut to clipboard
运算结果是 200000。
由此可知，这里的this指向的是car这个对象。
四、call和apply
运算后得到：BMW 。
这里通过apply（call也可以）强制把this指向了bmw这个对象。
function Car(){
console.log(this.name);
}
var bmw = {
name:"BMW",
showName:function(){
Car.apply(this);
}
}
bmw.showName();Run code
Cut to clipboard
运算后得到：BMW 。
这里通过apply（call也可以）强制把this指向了bmw这个对象。
（支付宝）给作者钱财以资鼓励 （微信）→
有过 4 条评论 »
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升序this 是javascript的一个关键字，当函数运行时在内部自动生成。this是会变化的，在不同的场合，代表的东西就不一样。简单点来说，this指调用这个函数的对象。当你使用this代表的当前html元素，这样你就可以使用这个元素的属性和方法呢。
e.target 中的e是可以自己随意取名的，现在关键讲的是target。简单点说就是触发这个事件的目标元素。它和this的区别就在于this是会变得，而target是不会变得，target的认定了目标就不会发生变化了。this其实就等于e.currentTarget.
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
$(this)是触发执行当前函数块（事件处理函数）最内层（距离最近的）的jQuery对象，在你的代码中就是触发了mouseover事件的对象。
function(e)中的参数e是事件对象，根据事件的不同，具有对应的子属性，比如键盘事件和鼠标事件等，你的代码中对应的是鼠标事件。
$('#video_popup .close').click(function(event) { event.preventDefault(); $('#video_popup').hide(); });请各位大哥详细分析？
click(function(event) 中的event是事件对象的意思，event这里因为是单击，就是mouseEvent(鼠标事件)。
event.preventDefault();这是阻止默认事件，比如在浏览器中点击右键，会弹出一个菜单，加了这句之后就不会弹出这个菜单了，还有单击链接，会跳到相应的地址，加了这句就不会跳转了，这句等效于return false。
input.onclick = function (evt) { //接受 event 对象，名称不一定非要 event alert(evt); //MouseEvent，鼠标事件对象 IE不支持 但是IE中，不支持直接接收，而是通过window.event来接收。 };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();//33.循环中问题
<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作为参数传入，依次 }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；
运行在函数时，函数是谁调用的就是指向谁；