JavaScript this指向相关内容
1,默认绑定this指向windw对象
看代码:
function test(C){
var a = 123
function b(){};
}
在预编译环节当中。
OA{
arguments:[1],
this : window,
C : 1,
A : undefined,
b : funtion(){}
}
test(1)
PS: 也就是说,在正常情况下,函数执行,this指向window;
那么有我们想改变this指向,我们该如何做到呢? 看下面
2,隐式改变:谁调用this指向谁;
看代码:
var str = '2222';
var obj = {
str:'1111',
b:function(){
console.log(this.str)
}
}
第一步:
obj.b() 会出现什么? // 11111
实现谁调用指向谁
并且我们的dome的onclick事件都是
升级: var fun = obj.b;//fun 存放了 obj.b整个函数的引用
fun() //2222
为什么?谁调用只想谁!
再看一道题:
var str = '2222';
var obj = {
str:'1111',
b:function(){
console.log(this.str)
}
}
var obj2 = {
str:'33333',
b : function(fn){
fn()
}
}
obj2.b( obj.b)// 出现什么?2222
obj2.b = obj1.b
obj2.b();//3333
讲解:
obj2.b( obj.b) 相当于obj.b作为实参传到函数里,形参接收之后,便有了obj.b的函数体引用,那么再
obj2.b里执行的过程中,fn()并没有对象调用它,只是一个单独函数体执行,内部走预编译的过程中。
从中扩展出 setTimeout(function(){ },1000)或者回掉函数也是这个原理
3,显式绑定:call apply bind
代码如下
var str = 'window';
var obj = {
str :'str',
print:function(){
console.log(this.str);
}
}
let newPrint = obj.print.bind(window);//bind 返回一个新的this指向的函数
// newPrint();
newPrint.call(obj);//bind只能绑定一次 bind过的函数 this无法在改变
// newnewPrint();
讲解,我们想主动改变this的指向,需要的方法call apply bind 。call和apply可以让函数执行,而bind可以返回一个新的函数体。bind改变this最厉害,bind之后的函数,call和apply都无法改变;
但是有一个方法可以改变this ,那就是下面的new操作符,请看下面
4 ,new 操作符
function test(C){
// var this = object.create(test.prototyoe)
// {
// __proto__:test.prototype
//}
var a = 123
function b(){};
}
new test
讲解:当new的过程中,函数内部出现// var this = object.create(test.prototyoe);使this发生改变。
总结: 四种this绑定的权重(看谁最厉害)
//1,默认绑定(空函数执行,函数单纯执行,this指向window) 默认权重
//2,隐式帮定(谁调用this指向谁) 第三权重
//3,显式绑定 (call apply bind) 第二高权重
//4,new 绑定this 权重是最高的
二 升级知识:ES6箭头函数中的this如何邦定?
//学习箭头函数,同学必须知道的几件事。 重要!!!!
//1,箭头函数没有this 没有arguments surper(class);
//2,箭头函数不能new ,不当成构造函数来 没有prototye;
//3,可以表示数据流向 方便JavaScript引擎优化扫码;
看代码:
var reg = 'window';
var obj1 = {
reg:"reg",
print:() => console.log(this.reg)
}
var obj2 = {
reg:"reg",
print:function(){
console.log(this.reg)
}
}
obj1.print() //window
obj2.print() //reg
讲解:箭头函数具有绑定this的能力 ,一旦箭头函数定义,this已经绑定,并且无法修改;
箭头绑定规则:绑定里最近的非箭头函数作用域中的this : 1 找到最近的非箭头的作用域 2 找this
最后再看一个例子:
var obj2 = {
reg:'obj',
getName:function(){
let show = () =>console.log(this.reg)
show();
}
}
obj2.getName() //obj
//scope2(show)----->scope1(getName) 'obj'
讲解:箭头函数show执行,找上一个非箭头函数作用域,发现是getName方法的作用域,然后找this,指向的是obj2,所以最后打印的是 ‘obj’;
JavaScript this指向相关内容的更多相关文章
- 移动端 h5 开发相关内容总结——JavaScript 篇
1.改变页面标题的内容 有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用 document.title='改动后的名字'; 就行解决我们的问题. 或者使用 //当前fir ...
- 在地图中调用显示FeatureLayer并进行render、popupTemplate、添加图例等相关内容的设置
ArcGIS Server发布完FeatureLayer后,就可以在自己的代码中调用并在地图上显示出来了. 一.代码框架 调用FeatureLayer,要在require开头引入"esri/ ...
- jQuery实现页内查找相关内容
当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息. 本文以查找车站 ...
- 学习笔记之html5相关内容
写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是 input的里面的 ...
- 第一天上午——HTML网页基础知识以及相关内容
今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...
- Web 前端性能优化相关内容解析
Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...
- Web 前端性能优化相关内容解析[转]
Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...
- JS动态增加删除UL节点LI及相关内容示例
<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...
- ”危险“的RESTRICT与GCC的编译优化(编程者对编译器所做的一个“承诺”:使用restrict修饰过的指针,它所指向的内容只能经由该指针修改)
restrict是C99标准中新添加的关键字,对于从C89标准开始起步学习C语言的同学来说(包括我),第一次看到restrict还是相当陌生的.Wikipedia给出的解释如下: In the C p ...
随机推荐
- 集成 jpush-react-native 常见问题汇总 (iOS 篇)
给 iOS 应用添加推送功能是一件比较麻烦的事情,本篇文章收集了集成 jpush-react-native 的常见问题,目的是为了帮助用户更好地排查问题 1. 收不到推送 确保是在真机上测试,而不是在 ...
- Using Request Headers for Metadata Address
问题描述 我将一个在本地调试正常的service部署到服务器后遇到了添加服务引用失败的问题.在把配置文件中基址使用的localhost替换成服务器的ip地址后问题得到了解决.但我感觉这并不是一个因为粗 ...
- leetcode-788-Rotated Digits(使用vector替代if else的逐个判断)
题目描述: X is a good number if after rotating each digit individually by 180 degrees, we get a valid nu ...
- js中的substr和substring区别
js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1) 一个参数: 示例: var str=“Olive”: str.substring( ...
- TabBarIOS
参考:http://blog.csdn.net/wmmhwj/article/details/68483592 import React, { Component } from 'react';imp ...
- Luogu P1886 滑动窗口
P1886 滑动窗口 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The a ...
- 评估指标:ROC,AUC,Precision、Recall、F1-score
一.ROC,AUC ROC(Receiver Operating Characteristic)曲线和AUC常被用来评价一个二值分类器(binary classifier)的优劣 . ROC曲线一般的 ...
- 解决php -v查看到版本于phpinfo()打印的版本不一致问题
https://blog.csdn.net/haif_city/article/details/81315372 整个事件的起因是这样的 通过git拉取laraevl项目发现缺少.env文件,打算使用 ...
- @PostConstruct和@PreConstruct注解
@PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的void()方法.而且这个方法不能有抛出异常声明. @PostConstruct //方式1 public v ...
- ServletContextListener知识点
1 知识点 2 代码演示 import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Da ...