企业官网建设流程全解析

展览网站模板,wordpress换域名 301,陕西省建设网站查询证件相片,seo关键词优化软件排名这是一篇关于 this 指向问题的分享会文档必要知识准备介绍 this 之前#xff0c;先简单介绍 四个概念(普通函数、对象方法、构造函数、箭头函数)#xff0c;作为我们的知识储备#xff0c;为后面我们介绍 this 做铺垫普通函数#xff1a;函数是一段可以被重复调用的代码块先简单介绍四个概念(普通函数、对象方法、构造函数、箭头函数)作为我们的知识储备为后面我们介绍 this 做铺垫普通函数函数是一段可以被重复调用的代码块普通函数的声明方法基本结构很简单我们都知道就是下面的这种function函数名(){函数体}// 调用函数函数名()对象方法什么是对象概念对象也是 JS 数据类型的一种和之前学习的数值类型、字符串类型、布尔类型是一样的。对象数据类型可以被理解成是一组无序的 键值对的集合是属性的容器。键 又称属性名通常是一个字符串值 可以是任何数据类型包括数字、字符串、布尔值、数组、函数甚至是另一个对象(嵌套)属性属性是成对出现的包括属性名和属性值它们之间使用英文:分隔多个属性之间使用英文,分隔怎样创建一个对象呢最常用的一种就是使用花括号{ }直接创建let对象名{属性名1:属性值1,属性名2:属性值2,属性名3:属性值3,属性名4:函数,...}什么是方法属性值可以是任何数据类型这里面有一个数据类型比较特殊就是函数如果一个属性的值是一个函数那么我们称这个属性是这个对象的一个方法由于普通函数和方法之间有点像所以我们举个例子带大家区分一下// 创建一个函数functionfn(){console.log(111)}// 直接放在script标签里面他就是一个普通函数functionfn(){console.log(111)}// 将这个函数放进一个对象里面letobj{fn:function(){// 是这个obj对象的方法console.log(111)}}怎样访问对象里面的属性呢创建了一个对象之后我们怎么访问该怎样访问这个对象里面的属性呢声明对象并添加了若干属性后可以使用.或[]获得对象中属性对应的值基本上写法就是对象名.属性名或者对象名[‘属性名’]如果我们需要为这个属性重新赋值或者添加一个属性也很简单对象名.属性名 新的属性值我们平常写代码经常写的// 获取DOM元素letoDivdocument.querySelector(div)// 给这个元素添加一个字体颜色为红色的样式oDiv.style.colorred// style 就是 oDiv 的一个属性这个属性的值其实也是一个对象而 color 是 style 的一个属性上面的是不是很熟悉其实当我们把div这个标签获取过来并赋给变量oDiv时我们也相当于创建一个一个对象名为oDiv的对象只是这个对象里面已经很多自带的属性和方法了我们用的时候直接使用.调用我们需要的属性并给它重新赋值就行了怎样访问对象里面的方法呢基本上和访问属性的写法是一致的只有一点不一样我们都知道普通函数的调用方法函数名()最后必须要加上一个小括号这个函数的调用的方法是不论在哪里都不变的前面讲到方法的属性值是函数既然是函数那我们也应该在属性名后面加上()即对象名.属性名()letperson{name:小红,age:18,singing:function(){console.log(两只老虎两只老虎跑的快跑的快...)},run:function(){console.log(我跑的非常快...)}}// 调用person对象中 singing 方法person.singing()// 调用person对象中的 run 方法person.run()构造函数在前面我们学习了对象之后应该能更好的理解构造函数因为构造函数其实也是在创建对象什么是构造函数本质上就是一个普通的函数但是会有两个地方不太一样命名方面上构造函数的名称首字母要大写这其实是一种普遍的命名的约定用来区别普通函数与new操作符一起使用构造函数通过new操作符来调用用于创建并初始化一个新对象。你们也可以这样理解当一个函数使用new操作符调用时它就成为了“构造函数”即一个用于构造新对象的函数构造函数的作用创建对象在没有构造函数之前我们使用对象字面量创建单个对象// 对象字面量创建单个对象letperson1{name:Alice,age:25,greet function(){console.log(Hello,my name is11);}}person1.greet();// 输出: Hello, my name is 11但如果要创建多个结构相似都有 name, age, greet 属性的对象重复写对象字面量会很麻烦这时构造函数就派上用场了构造函数就像一个“工厂模具”可以批量生产具有相同属性和方法结构的对象怎样使用构造函数呢第一步定义构造函数在其内部使用this来定义未来的实例对象里面的属性和方法创建一个函数首字母要大写// 1. 定义构造函数 (首字母大写)// 这里相当于创建了一个模板functionPerson(name,age){// 2. 使用 this 来添加属性this.namename;this.ageage;}第二步使用new调用构造函数使用new操作符来调用Person函数它会按照构造函数的模板创建一个新的对象并返回它// 使用 new 创建实例// 我们在这里调用这个模板letperson1newPerson(Alice,25);letperson2newPerson(Bob,30);console.log(person1.name);// 输出: Aliceconsole.log(person2.age);// 输出: 30我们可以看一个例子到这里我想问大家现在大家知道上面第二个图片里的变量person1和person2的值是什么数据类型吗箭头函数箭头函数是 ES6 中引入的一种新的函数语法它提供了一种更简洁的方式来编写函数基本语法我们与传统的函数表达式对比来学constaddfunction(a,b){returnab}// 完整写法多行语句或需要显式返回对象时constadd(a,b){returnab}// 简洁写法单行表达式隐含 returnconstadd(a,b)ab大家观察上面的两种写法有什么不同仔细观察赋值等号左边的没有变化变化在右边箭头函数删去了 function 变成了 并且将 放到了 小括号 和 大括号 的中间好啦到这里我们的前置只知识准备就完成了这就开始我们第二部分的介绍吧this 到底什么在正式开始介绍 this 到底是什么之前这里有两个问题this 是不是变量不是this是一个特殊关键字像function,if,new一样不是可以声明的变量或对象的属性this 是对象吗学到现在大家应该或多或少都应该见过this.sayName()这种写法那按照我们上面对于对象方法的学习大家觉得this 是对象吗也不是this 很多变它本身不是一个对象只是它的值实际根据是谁在调用它而变的只是一般情况下 this 的值(它所指向的东西)总是一个对象有一个类比万能电视遥控器(this)万能遥控器(this)本身不是电视但按下遥控器的按钮调用 this的效果取决于它当前指向并控制的是哪台电视你可以用同一个遥控器this通过改变它的指向不同的调用方式来控制不同的电视不同的对象所以 this 到底是什么呢一般来说this 都是放在一个函数中使用的调用这个函数也就相当于在调用这个 this 当我们总结上面的问题和类比例子后其实可以用一句话总结就是this的值不是在我们定义函数时确定的而是在我们调用这个函数时才被确定的一个贴近生活的比喻想象你是一个员工函数你有一句话函数体“我正在为this公司工作“如果你在A公司的办公室里说这句话this就代表 A公司如果你在B公司的办公室里说这句话this就代表 B公司你函数本身没变但你所在的环境调用者变了this的含义也就随之改变了说多不如练多这里有一个小问题大家可以先试试能不能解答constperson{name:小明,sayHi:function(){console.log(你好我是this.name)}}person.sayHi()六个常见环境下的 this 指向问题全局环境中的 this全局环境就是在script/script里不在任何函数或对象内部此时的 this 始终指向的是全局对象在浏览器中就是 windowconsole.log(this)普通函数中的 this当一个函数被直接调用时要考虑两种情况this 在非严格模式下指向全局对象windowfunctionfun(){console.log(this)}fun()// 我们实际上是在全局作用域下直接调用函数// fun() 实际上是window.fun(), 所以this - window在严格模式下指向undefinedJS 严格模式JavaScript 在语法和行为上存在一些模糊的特性可能导致一些不易察觉的错误为提高代码的质量和可维护性JS 引入了严格模式通过启用一些额外的规则强制执行更严格的语法和行为帮助提前发现和修复潜在 bug。// 演示严格模式下的情况functionfu(){use strict// 在函数体中写一句 use strict 就可以启用函数的严格模式console.log(this)}fu()// this 指向 undefined对像方法中的this当函数作为对象的方法被调用时this指向该方法所属的对象letperson{name:John,sayName:function(){console.log(this.name)}}person.sayName()letname卡卡;letcat{name:有鱼,eat1:{name:年年,eat2:function(){console.log(this.name);}}}cat.eat1.eat2();构造函数中的this使用 new 关键字实例化调用函数时该函数被当作构造函数this 会指向新创建的对象实例// 构造函数functionPerson(name){this.namenamethis.sayHellofunction(){console.log(Hello, Im this.name)}}// 创建实例letjohnnewPerson(John);john.sayHello()// 输出 Hello, Im John这里 this 指向 john 实例letjohn{name:name,sayHello:function(){console.log(Hello, Im this.name)}}// 构造函数functionPerson(name){this.namenamethis.sayHellofunction(){console.log(你好我是${this.name})}}// 创建实例constperson1newPerson(张三)person1.sayHello()事件处理中的 this在 DOM 事件处理函数中this 通常指向触发事件的元素button idmyButtonClick me/buttonscriptvarbuttondocument.getElementById(myButton)button.onclickfunction(){console.log(this)}/scriptbuttonclassbtuClick/buttonscriptletoBtudocument.querySelector(.btu)oBtn.addEventListenter(click,clickBtu)functionclickBtu(){console.log(this)}/script箭头函数中的 this箭头函数没有自己的this它的 this 直接“捕获”或“继承”**外层作用域它父级**的 this 的值前面介绍过普通函数 的this是动态的取决于如何被调用而箭头函数 的this是词法的取决于定义时的上下文且一旦定义就固定不变词法的 写代码时候的位置决定的this的出生地// 普通函数functionouterFunction(){this.nameOutervarinnerFunctionfunction(){console.log(this.name)}innerFunction()}// 箭头函数functionouterFunctionWithArrow(){this.name外层作用域的thisvarinnerFunction(){console.log(this.name)}innerFunction()}// 一种情况newouterFunction()newouterFunctionWithArrow()// 另一种调用情况outerFunction()outerFunctionWithArrow()改变 this 指向的方法由于箭头函数的this来自于继承箭头函数无法使用以下三种方法改变this指向call()方法call()方法附加在函数调用后面使用可以忽略函数本身的 this 指向然后将这个函数本身的 this 指向绑定到call()方法的第一个参数上面函数.call(thisArg,arg1,arg2,...,argN)参数解析thisArg就是你想将调用这个方法的函数本身的 this 指向绑定到哪个对象上面arg1-argN从参数arg1开始依次是向函数传递参数注意点使用call()方法时相当于你调用了这个函数会立刻执行这个函数functiongreet(){console.log(this.animal,的睡眠时间一般在,this.sleepDuration,之间);}constobj{animal:猫,sleepDuration:12 到 16 小时,};greet.call(obj);// 猫 的睡眠时间一般在 12 到 16 小时 之间apply()方法和call()方法很相似几乎一样函数名.apply(thisArg,[arg1,arg2,...,argN])参数解析thisArg同样为你想将这个函数本身的 this 指向绑定到哪个对象上面[arg1,arg2,...,argN]主要区别点一个数组数组里面的每一项依次是向函数传递的参数这里可以直接写入一个数组也可以写一个值为数组的变量bind()方法和上面两个方法不一样bind()方法创建一个新函数并且还有返回值使用bind()方法后不会立即执行函数而是返回一个已经改变了 this 指向的函数函数名.bind(thisArg,arg1,arg2,..,argN)参数解析thisArg作用与前两个一致arg1, arg2, ..,argN 在调用函数时插入到传入绑定函数的参数前的参数返回值一个改变了 this 指向以后的 function 函数constmodule{x:42,getX:function(){returnthis.x;},};console.log(module.getX())constunboundGetXmodule.getX;//undefined 函数未被调用存储的是一个值console.log(unboundGetX());constboundGetXunboundGetX.bind(module);console.log(boundGetX());总结及综合演练this 指向1、一般函数谁调用函数this 就指向谁没有调用者就指向全局对象 Window2、箭头函数箭头函数不会创建 this它的 this 继承自上层作用域中的 thisbuttonclassbtuClick/buttonscriptconsole.log(this)// 一个普通函数functionfn(){console.log(this)}// 创建一个对象letobj{fn:fn}// 直接调用fn()// 对象方法调用obj.fn()// 事件处理中调用letoBtudocument.querySelector(.btu)oBtu.addEventLister(click,fn)/script// 构造函数functionFn(age){this.name111this.ageage,this.currentAgefunction(){console.log(this.age)}}letFn1newFn(16)Fn1.currentAge()// call()方法functionProduct(name,price){this.namename;this.priceprice;}functionFood(name,price){Product.call(this,name,price);this.categoryfood;}console.log(newFood(cheese,5).name);代码解析关键点Product.call(this, name, price)这行代码的作用是在 Food 的上下文中调用 Product 构造函数第一个参数 this 是新创建的 Food 实例call()方法将 Product 中的 this 绑定到传入的 Food 实例上相当于在 Food 实例上设置 name 和 price 属性执行过程new Food(cheese, 5)创建 Food 实例Food 构造函数中的 this 指向这个新实例Product.call(this, cheese, 5)让 Product 构造函数在这个 Food 实例上工作最终创建的 Food 对象包含{name: cheese, price: 5, category: food}constouter{name:Outer Object,innerFunction:function(){constinner{name:Inner Object,nestedFunction:function(){console.log(this.name)}}inner.nestedFunction()}}outer.innerFunction();