JS关于this指向的小练习

请阅读以下代码:var obj = {};obj.log = console.log;obj.log.call(console, this)该代码在浏览器中执行,输出的日志结果是什么? 这道题就是问console.log.call(console,this)打印出什么,这道题很容易引导人走向误区,因为我们知道call方法就是改变this的指向,但是这个被改变的this是log函数体内的this,而不是题目中作为参数传入的this,作为参数的这个this是指向window的. …

JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解

前言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐渐淘汰:而面向过程的语言也只有C语言老大哥依然坚挺:现在主流的语言(例如Java.C++.PHP等)都是面向对象的语言. 而我们的JavaScript语言,恰恰介于面向过程与面向对象之间,我们称它为"基于对象"的语言.但是,JS中的OOP依…

关于js中this指向的理解总结！

关于js中this指向的理解! this是什么?定义:this是包含它的函数作为方法被调用时所属的对象. 首先,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(虽然在很多情况下那样去理解不会出什么问题,但是实际上会有些特殊存在),那么接下来我会深入的探讨这个问题. 例子1: function a(){ var user = " 小明"; console.log(this.user); //undef…

JS中this指向的更改

JS中this指向的更改 JavaScript 中 this 的指向问题前面已经总结过,但在实际开中, 很多场景都需要改变 this 的指向. 现在我们讨论更改 this 指向的问题. call更改this指向 call 的使用语法:func.call(thisArg, arg1, arg2, ...) call 方法需要一个指定的 this 值( this要指向的对象 )和一个或者多个参数.提供的 this 值会更改调用函数内部的 this 指向. // 使用 call 方法改变调用函数执行…

Atitit.js this错误指向window的解决方案

Atitit.js this错误指向window的解决方案 1.1. 出现地点and解决之道1 1.2. call,apply和bind这三个方法2 1.2.1. Function.prototype.call2 1.3. 在函数内部出现的this,指什么要看这个this所在的函数的被调用方式. 不论这个this出现在什么样的函数中,层次有多深,结构多复杂,只要看直接包含它的函数即可.例如: (1) 被直接调用时,this指全局对象window.3 2. ref3 1.1. 出现地点and解决…

前端js中this指向及改变this指向的方法

js中this指向是一个难点,花了很长时间来整理和学习相关的知识点. 一. this this是JS中的关键字, 它始终指向了一个对象, this是一个指针; 参考博文: JavaScript函数中的this四种绑定形式 this指向及改变this指向的方法二. this显示绑定和隐式绑定 1. this显示绑定含义: 当一个函数没有明确的调用对象的时候, 也就是单纯作为独立函数调用的时候, 将对函数的this使用默认绑定: 绑定到全局的window对象在显式绑定下: 函数将取得在"…

html+css+js实现狼吃羊小游戏

html+css+js实现狼吃羊小游戏一.总结一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系实现每个节点的轻松定位,也就是在表格布局的基础上,给每个占位的span添加了横纵坐标(第二套坐标系)来简化位置操作 90 $('.qipan').append('<div class="cell" xpos='+(i%5)+' ypos='+Math.floor(i/5)+'>…

js中this指向的三种情况

js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.log(this);//Window //普通函数 function fn(){ console.log(this); //Window } fn(); //函数加括号调用叫函数自执行,函数自执行时,内部的this指向顶层对象/window 二.事件函数内部的this指向事件源:注意在事件函数中如果包…

js函数声明外面使用小括号括起来再接一个小括号的写法

js函数声明外面使用小括号括起来再接一个小括号的写法 (function(){})(); (function(){}()); !function(){}(); 总结ps:意思将函数声明变成,直接执行的函数表达式. 上面三个语句都是在运算符相关上下文中,所以都是表达式,就可以强制调用了,下面做一下分析: (function(){})(),(function(){})是一个表达式,会强制其理解成函数直接量方式,也就是表达式方式创建函数,(function(){})它会返回函数对象的引用,最后使用小括…

js实现简单的俄罗斯方块小游戏

js实现简单的俄罗斯方块小游戏开始 1. 创建一个宽为 200px,高为 360px 的背景容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &…

Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊

声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ‍ 必须穿戴基地发放的防辐射服才能生存.阿狸驾驶星际飞行器降临此地,快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧! 本文使用 Three.js + React + CANNON 技术栈,实现通过滑动屏幕控制模型在 3D 世界里运动的 Low Poly 低多边形风格小游戏.本文主要涉及到…

JS练习实例--编写经典小游戏俄罗斯方块

最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也是有的),我会说得很详细很详细的所以要看完需要好多耐心的... 基本思路游戏区域:游戏区域是固定的,这里将它设为宽10单位,高16单位的矩形区域,前端显示用表格来实现,并将每个td保存在一个二维数组中,用于渲染游戏过程.方块:方块有7种形状,用一个4*4的矩阵来保存方块的形状:按方向上键方块可以旋…

关于js中this指向的总结

js中this指向问题一直是个坑,之前一直是懵懵懂懂的,大概知道一点,但一直不知道各种情况下指向有什么区别,今天亲自动手测试了下this的指向. 1.在对象中的this对象中的this指向我们创建的对象,例如: var obj ={ ccc : 1122, ddd : 2233, ded : function(){ console.log(this); } , fff : function(){ console.log(this === obj ); } } obj.ded(); obj.fff…

javascript函数，构造函数。js对象和json的区别。js中this指向问题

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.好处:在出现大量程序相同的时候,可以封装为一个function,这样只用调用一次,就能执行很多语句.(1)语法:函数就是包裹在花括号中的代码块,前面使用了关键词 function:eg:function myFunction(){ //执行的代码}//调用.myFunction();<button onclick="myFunction()">点击</button>(2)参数function小括号中的参…

理解JS闭包的几个小实验

学了JavaScript有一段时间了,但是对闭包还是不太理解,于是怀着心中的疑问做了几个小实验,终于有点明白了. 首先看一下MDN上的定义:闭包是函数和声明该函数的词法环境的组合. 简单来说,闭包是一种现象. 我在搞清楚了2个概念后,理解了闭包. 首先是关于函数以及函数调用的概念: 我们来做一个简单的实验: function foo () { var a = 1; function bar () { console.log(a) } return bar; } var first = foo()…

JS中this指向问题和改变this指向

首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题. 为什么要学习this?如果你学过面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不用看这篇文章…

js入门学习~ 运动应用小例

要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰) 主要是练习多个物体的运动框架~~ ----------------------------------------------------js代码如下 ----------------------------------------------------- //执行函数window.onload = function(){ //声明控制变量 var aDiv = docu…

原生js实现查询天气的小应用

demo:https://zsqosos.github.io/weather/ 截图: 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市,随后调用聚合数据的天气API将数据放在页面上.由于ajax不支持跨域,所以采用了jsonp的方式来调用数据. 实现的原理比较简单,HTML和css比较长,我就只将js代码贴出来,想看完整代码的朋友可以去我的github查看 https://github.com/zsqosos…

总结的js性能优化方面的小知识

前言一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解. 鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个属于自己的居所好好生存,所以平时会有意无意的去积累一些使用jQuerry的常用知识,特别是对于性能要求这一块,总是会想是不是有更好的方式来实现. 下面是我总结的一些小技巧,仅供参考.(我先…

今天的学习——关于JS时间获取方面的小问题

①JS获取时间 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1…

写给Node.js新手的7个小技巧

一些我更愿意在开始就知道东西利用 Node.js 开发是一个非常有趣,和令人满足的过程, 他有3万多个模块可以选择使用,并且所有的模块可以非常容易的集成入现有的应用之中. 无论如何,对于一些刚开始使用Node.js 开发的的人来说,很容易碰壁,在这个文章中,我会提到在你学习过程中遇到的问题. 贴士 1: 在开发环境使用 nodemon, 在生产环境使用pm2 当你第一次开发Node.js应用的时候,其中一件事情就是一次又一次的运行[file].js 就和揭伤疤一样. 当我第一次开发的node…

JS的基本类型（小知识）

一:js中的基本类型: 基本类型:boolen, string ,number,null,undefined 引用类型:object,和函数二.undedifned和null的区别: 1 undefined是属于未定义状态,是声明了但没有赋值 1. 方法没有明确的返回值时,返回的是undefined 2. 当对为声明的变量应用typeof时,返回值是undefined (typeof可以返回数据类型) 2.null:是属于"已知状态",他表示尚未存在对象,null具有特殊意义,可以为…

js 继承的简单易懂小例子

js 继承今天主要说原型链继承.构造继承.组合继承三种常用继承方式,分享一下我的理解. 原型链继承例子1 //原型继承function A(name){ this.name = name;}function B(){ this.school = "alb"}B.prototype = new A(); B.prototype.age = "112";var b = new B();console.log(b); console.log(b.age);console…

js、jQuery实现2048小游戏

2048小游戏一.游戏简介: 2048是一款休闲益智类的数字叠加小游戏二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合并,组成更大的数字,每次移动或合并后会增加一个数字. 当16宫格中没有空格子,且四个方向都无法操作时,游戏结束. 三. 游戏目的: 目的是合并出2048这个数字,获得更高的分数. 四. 游戏截图: 五.先来玩一下: 开始游戏查看源码六.游戏实现原理: 使用js.jQuery实现了PC版及手机版…

关于js中 toFixed()的一个小坑

作为一名前端,大家都应该知道,toFixed()的作用,toFixed()经常用于前台与后台数据格式的转换,套用下w3c上面的定义: 定义和用法toFixed(n) 方法可把 Number 四舍五入为指定小数位数的数字.n为保留的小数位数返回值 typeof (1.0.toFixed()) //string 返回值是string类型的其实大部分的时候,我们在项目中运用,都是将多位的小数,转化成固定位数的小数,比如 1.000000.toFixed(2) //"1.00" 但是有的时…

JS 条形码插件--JsBarcode 在小程序中使用

在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 var SET_STARTB = 104 var SET_STARTC = 105 var SET_SHIFT = 98 var SET_CODEA = 101 var SET_CODEB = 100 var SET_STOP = 106 var REPLACE_CODES = { CHAR_TIL…

JS与CSS那些特别小的知识点区别

1:target与currentTarget的区别 currentTarget指向的事件绑定的元素,target指向的是你点击的元素 2:attr与jprop在jQuery在API当中的区别 2.1:首先要区分html标签与DOM元素对象的区别,页面加载以后,HTML标签在内存中都会对应一个DOM元素对象,他会将HTML标签固有的特性转化为对象属性, 2.2:所以对于标签中自定义的特性只能使用attr方法,其他的可以使用prop方法 3:pointer-events: none属性的使用 poi…

面试官问：JS的this指向

前言面试官出很多考题,基本都会变着方式来考察this指向,看候选人对JS基础知识是否扎实.读者可以先拉到底部看总结,再谷歌(或各技术平台)搜索几篇类似文章,看笔者写的文章和别人有什么不同(欢迎在评论区评论不同之处),对比来看,验证与自己现有知识是否有盲点,多看几篇,自然就会完善自身知识. 附上之前写文章写过的一段话:已经有很多关于this的文章,为什么自己还要写一遍呢.学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景.你不一定能看到别人看到的风景,体会到别人的心情.只有自己去登山…

深入理解JS各种this指向问题

说到this,入前端坑的人都知道这是JS初期语言毕竟之路.很多人(我就是)对于this的了解很模糊,或者不够全面.最近打算在反过来在看下es6,在es6中又出现了箭头函数对于this的理解有多了层认识.所以就在写一遍来加强自己的认知. 在讲this之前,我们先把作用域链在复习一下在红宝书中对作用域链的描述有这么一句话:当代码在一个环境中执行时,会创建变量对象的一个作用域链.作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问简单来说,作用域链的作用就是在函数使用一个变量的时候,由近…

初学JS——实现基于计时器的小游戏。

这几天一直在看网易云课堂上免费的JS课程,正好今天看到讲了计时器setInterval,第一感觉就是像C#里的TIMER.然后课程里举得例子正好通过计时器改变新生成窗口的位置, 然后就突然有了灵感!可以写一个“抓住我”的小游戏. 因为刚学JS 懂的实在很少,所以就通过自己已经学过的内容实现了, 主要原理是建一个5X5的表格,每一个格子里放一个DIV,并通过数字命名ID 1-25. 然后就是通过网上找的一个获取随机数的方式,getelementbyid获取随机的一个DIV并且通过innerHTML…

【JS关于this指向的小练习】的更多相关文章