前言:
当前兄弟们对“html里面的this”大概比较注重,小伙伴们都需要知道一些“html里面的this”的相关知识。那么小编也在网上汇集了一些对于“html里面的this””的相关资讯,希望兄弟们能喜欢,各位老铁们一起来了解一下吧!1:基本概念
this字面意思是当前,当前执行代码的环境对象或者是上下文。代表着当前方法执行的环境上下文,那么何为环境上下文,通俗的说,谁调用了函数,谁就是这个函数的环境上下文。
在js中,this只有两种指向,一种是指向当前的封闭作用域,或者是指向当前作用域的外层,this的最顶层就是window对象。
关于this必须要了解的是严格模式,严格模式是js里面的一个子集,是具有限制性JavaScript变体,严格模式也是js的一种,但是加了一些限制。
比如:
在严格模式下通过抛出错误来消除了一些原有的静默错误(静默错误:语法有错误但是js并没有提示,默认允许这个操作)。比如要取一个函数的传入参数,在非严格模式下,可以直接拿到它的grument,但在严格模式下会抛出一个错误。严格模式修复了一些导致JavaScript引擎难以执行优化的缺陷禁用了在ECMAScript的未来版本中可能会定义的一些语法
进入"严格模式"的标志:"use strict";
// 为整个脚本开启严格模式 "use strict";var v = "Hi! I'm a strict mode script!";// 为函数开启严格模式 function strict() { 'use strict'; function nested() { return "And so am I!"; } return "Hi! I'm a strict mode function! " + nested();}2:全局环境
在全局环境下,无论是否在严格模式下,在全局执行环境下(任何函数体外部)this指向全局对象。也就是说在全局执行环境,这个this永远指向全局对象,这个全局对象在浏览器中就是window。
//浏览器环境var name = 'Eric';console.log(window.name === this.name); /* true */console.log(window === this); /* true */3:函数体内部
在函数体内部,this的值取决于函数被调用的方式。函数被调用的方式有很多种:
简单调用,也就是说没有添加任何额外的操作,没有添加一个this的绑定或者是改变。
简单调用分为严格模式与非严格模式。
在非严格模式下,this默认指向全局对象。
// 浏览器环境function simple(){ return this;}console.log(simple() === window);// true在严格模式下,保持进入执行环境时的值,没有指定时默认undefined。
// 浏览器环境function simple2(){ "use strict"; return this;}simple2() === undefined;// true window.simple2() === window;// true
this传递,在js中this绑定有两种:
一种是call/apply,可以看作是一种,它们都是一个绑定this的立即执行的一个方法,绑定之后会立即执行这个函数,两者的区别在于传递参数的不同,一个是传一个参数,一个是传一堆参数;call/apply实际上是绑定值的是一个对象,存在一个ToObject过程。call/apply是一个立即执行的绑定this的一个操作。
// 浏览器环境 var object = { name: 'Eric'};var name = 'Iven';function getName(arg) { return this.name;}getName(); /* Iven */getName.call(object); /* Eric */getName.apply(object); /* Eric */另一种是bind,与上面不同的是bind不会立即执行,它只是实现一个绑定的过程,返回的是一个柯里化的函数,这个柯里化的函数就是call/apply。bind只能被绑定一次。
name = 'Davy';function bindThis(){ return this.name;}var getName1 = bindThis.bind({ name: "Eric" });console.log(getName1()); /* Eric */var getName2 = getName1.bind({ name: "Iven" });console.log(getName2()); /* Eric */
箭头函数在执行的时候会形成一个封闭的作用域,this与封闭作用域的this保持一致,call/apply/bind都将会被忽略。
// 浏览器环境 var globalThis = this;var arrowsFunction = () => this;console.log(arrowsFunction() === globalObject); /* true */
作为对象的方法被调用(有一个靠近原则):在对象里面定义了一个函数,然后通过对象去调用这个函数。
// 浏览器环境 var object = { name: 'Eric', getName: function() { return this.name; }};console.log(object.getName()); /* Eric */function getName2() { return this.name;}object.getName = getName2;console.log(object.getName()); /* Eric */object.object = { getName: getName2, name: 'Iven'};console.log(object.object.getName()); /* Iven */4:全局函数setTimeoutsetIntervalalert
setInterval()方法用于在指定的毫秒数后调用函数或计算表达式。
语法:setTimeout(code,millisec),参数code必需,要调用的函数后执行的JavaScript代码串;millisec必需,在执行代码前等待的毫秒数。
注意:setTimeout()只执行code一次,如果需要多次调用,请使用setInterval()或者让code自身再次调用setTimeout(),也就是利用递归。
setInterval()方法可按照指定的周期来调用函数或计算表达式。它会不停地调用函数,指导clearInterval()被调用或者窗口被关闭。由setInterval()返回的ID值可以用作clearInterval()方法的参数。
语法:setInterval(code,millisec[,"lang"])
标签: #html里面的this