JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控…

在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在来一些例子吧. 在这个例子中,我们通过使用一个箭头函数(=>)来bind用户ID到每个删除按钮中. ## index.js import React from 'react'; import { render } from 'react-dom'; import User from './User'…

一.ES6 允许使用"箭头"(=>)定义函数. // var f = v => v;// 上面的箭头函数等同于: // var f = function(v) {// return v;// };// 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分.如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回. // 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错. 箭头函…

普通函数:this指向分为4种情况,1. obj.getName();//指向obj2.getName();//非严格模式下,指向window,严格模式下为undefined3. var a = new A();   a();//指向A本身4.getName().apply(obj);//指向obj 箭头函数:箭头函数本身是没有this和arguments的,在箭头函数中引用this实际上是调用的是定义时的上一层作用域的this.这里强调的是上一层作用域,是因为对象是不能形成独立的作用域的.例如…

React绑定onClick为什么要用箭头函数? https://segmentfault.com/q/1010000010918131 如何优雅地在React中处理事件响应 https://segmentfault.com/a/1190000010308456 一: 事件处理函数使用es6写法: 在使用ES6 classes或者纯函数时,React不会自动绑定this到当前组件上,需要手动实现this的绑定. handleClick = (i) => { console.log(i) } <…

此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 setState 的表现好像有点怪异,和理解中的 state 更新机制不太一样,下面我们就来简单探讨下 setState 背后的机制. 课程中的其他常见小问题请常见 React.js 开发参见问题 Q&A. 1 setState 问题的复现 我们看下面一段简单的代码,代码通过点击一个按钮,改变 state…

这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源码的角度再看 React JS 中的 setState 从源码的角度看 React JS 中批量更新 State 的策略(上) 1. batchingStrategy 策略 现在我们开始来看 batchingStrategy 的策略定义. 目前 React 中 batchingStrategy 的定…

在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步表现,并从源码的角度简单地了解了 React 中 setState 的设计结构以及原理. 这篇文章继上篇文章后,继续从源码的角度来了解 React 中对 State 批量更新策略的定义. 同样,源码的部分为了保证格式正常就直接截图了,查看源码点击对应的链接直接跳转至 GitHub 查看即可. 1.…

在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 setState "诡异"表现的原因. 源码的部分为了保证格式显示正常就截图了,查看源码点击对应的链接直接跳转至 GitHub 查看即可. 1. React 中的 setState 更新逻辑代码 在更新逻辑的部分,可以看到 React 会通过 batchingStrategy.isBatc…

用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   写出JS中声明对象的三种方法. Var obj={ name:名字, Say:function(){ Alert(‘sssss’); } }     Var obj=new Object();     Var obj={} Obj.name=’名字’; Obj.say=function(){ Ale…

js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的) 一.总结 1.open的post方式send函数带参数:如果连接服务器open函数中的请求方式是post方式的话,那么向服务器发送请求的send需要带上参数(默认get方式的话是直接url带参数,…

JS中this的四种用法 1.在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(); //1 2.作为对象方法调用,this 指代上级对象 function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1 3.作为构造函数调用,this 指代new 出的对象 function test(){ this.x =…

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListener的 DOM API:以前我们通过手动 DOM 操作进行页面更新(例如借助 jQuery),而在 React.js 当中可以直接通过 setSt…

this一直是一个JS中的困扰问题,这次在跑JS精粹的代码的时候顺带发现了Node里面全局变量的问题 var x = 1; var myObj = { x: 2 }; myObj.func = function() { var print = function() { console.log("this.x is:"+this.x); //undefined } print(); } myObj.func(); 如果上面的这句话,跑在浏览器中,最后输出的会是 this.x is: 1.…

在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListener的 DOM API:以前我们通过手动 DOM 操作进行页面更新(例如借助 jQuery),而在 React.js 当中可以直接通过 setState 的方式重新渲染组件,渲染的时候可以把新的 props 传递给子组件,从而达到页面更新的效果. React.js 这种重新渲染的机制帮助我们免除了绝…

1. 在JS中, 函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. 如:"hamburger".substring(4,8) returns "urge" 2. substr(start,length) 如:当DETAIL_TYPE 的值为1111053 时,substr(DETAIL_TYPE,1,6)  = 111105 从DETA…

[嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做图形题思路]              1确定图形一共几行  极为外层的循环的次数             2确定每行有几种元素,代表有几个内层循环.             3 确定每种元素的个数,即为每个内层循环的次数                 tips:通常:找出每种元素个数,与行号的关…

(JavaScript 中,函数的参数传递方式都是按值传递,没有按引用传递的参数) 一.数据类型 在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Undefined,Null,Boolean,Number,String. 引用类型值,也就是对象类型 Object type,比如Object,Array,Function,Date等. 变量的复制 众所周知,js中变量的基本类型和引用类型保存方式是不同的,这也就导致变量复制时也就不同了.如果从一个变…

1. eacape(): 该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / .其他所有的字符都会被转义序列替换.其它情况下escape,encodeURI,encodeURIComponent编码结果相同. escape对0-255以外的unicode值进行编码时输出%u****格式 可以使用 unescape() 对 escape() 编码的字符串进行解码. ECMAScript v3 反对使用该方法,应用使用 deco…

/*最流行的写法*/ (function() { alert("run!") })(); /* !号可以有1~正无穷个,所以这一种就可以衍生无数种方式 */ !!!(function() { alert("run!") })(); (function() { alert("run!") }).call(); (function() { alert("run!") }).apply(); (function() { alert(…

在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam…

从上周开始,我所在的学习小组正式开始了angular的学习,angular是全面支持es6的,所以语法上和以前的angular有了很大的不同,比如变量声明时就抛弃了var,而选择了let和const:记得刚开始学习js的时候,使用webstrom时用var,webstrom会在下面画一条小绿线,表示这个用法,问题不大,但是有点问题.因为webstrom推荐使用最新的标准,之后问过学长,他说这是es6的语法,暂时不用管,防止浏览器不兼容. 终于,现在到了学习es6的时候. const与let co…

先上一段让大家比较蒙圈的代码,接下来再慢慢讲解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> console.log(f…

Ps. 晚上加班到快十点,回来赶紧整理整理这篇文章,今天老大给我推荐了一篇文章,我从写技术博客中收获到了什么?- J_Knight_,感受也是很多,自己也需要慢慢养成记录博客的习惯,即使起步艰难,难以坚持,但还是要让自己加油加油. 前两天把我整理的[复习资料]ES6/ES7/ES8/ES9资料整理(个人整理)分享给大家啦. 正文内容开始: 1.介绍 个人简单理解为,一个函数可以接收其他函数作为参数,这种函数便称为高阶函数,而主要目的就是为了能接收其他函数作为参数. Q: 为什么可以接收一个函数作…

JS函数有两种命名方式 1.声明式 声明式会导致函数提升,function会被解释器优先编译.即我们用声明式写函数,可以在任何区域声明,不会影响我们调用. function XXX(){} 2.函数表达式 函数表达式我们经常使用,而函数表达式中的function则不会出现函数提升.而是JS解释器逐行解释,到了这一句才会解释. 因此如果调用在函数表达式之前,则会调用失败. var k = function(){} fn1(); function fn1(){}//可以正常调用 fn2(); var…

在ECMAScript5中没有块级作用域一说,只有函数作用域和全局作用域,在其中声明的变量和函数和其他语言的展现形式不同,在某些情况下不一定需要先定义后使用,函数和变量的使用可以在其声明之前,这到底是怎么回事呢?让我们一起揭开变量声明提前的神秘面纱!!! 一.变量声明提升 var a = 10; function test() { a = 100; alert(a); alert(this.a); var a; alert(a); } test(); 这题考的也是变量声明提升,函数作用域中提前使…

今天研究了一下bind函数,发现apply和call还可以有这样的妙用,顺便巩固复习了闭包. var first_object = { num: 42 }; var second_object = { num: 24 }; function multiply(mult) { return this.num * mult; } Function.prototype.bind = function(obj) { var method = this, temp = function() { retur…

先看看一个简单的代码 var str='Hello World'; alert(str);//弹出 Hello World 再看一段代码: var v='Hello World'; (function(){ alert(v); })() //和我们预期的一样,还是弹出 Hello World 那么铺垫完了,继续coding var str='Hello World'; (function(){ alert(str); var str='I love coding...'; })() //出乎我们…

在JavaScript中,函数可以 作为值赋给一个变量 作为参数传递给另一个函数 作为另一个函数的返回值 所以我们说JavaScript的函数是“一等公民”. 赋值: var foo = function() { console.log("Hello World!"); }; foo(); 以上代码把一个匿名函数( Anonymous Function)赋值给了变量foo.你也可以使用具名函数,这样有利于Debug,但要注意,使用具名函数不会影响函数的调用方法,仍然是通过变量名加一对圆…

转自http://react-china.org/t/react-js/398的jsgeeker 中文文档地址 http://reactjs.cn GitHub地址 https://github.com/reactjs-cn/react-docs 阮一峰的 "React 入门实例教程" http://www.ruanyifeng.com/blog/2015/03/react.html 极客学院整理的文档 http://wiki.jikexueyuan.com/project/react…