React 万能的函数表达式
一、语法简介
表达式可以以下两种方法，
(1)(function A(){})(this),(this)参数在函数外面
(2)(function B(){}(this)),(this)参数在函数里面
(1)和(2)的区别在于，(1)的左边的一对括号是强制A()求值，返回函数的引用，再传this参数调用函数求值，而(2)是把(this)传给A(),直接返回函数的返回值，而不是函数引用本身。
方式一：
<!DOCTYPE html>
<html lang="zh-cn"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<script src="./react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var style = {
color : "red",
border: "1px #000 solid",
};
var HelloWorld = React.createClass({
render: function(){
return <p>你好， {
(function(obj){
if(obj.props.name)
return obj.props.name
else
return "World!"
})(this)
}</p>;
}
});
React.render(<div style={style}><HelloWorld name="李小龙!"></HelloWorld></div>, document.body);
</script>
</body> </html>
方式二：
<!DOCTYPE html>
<html lang="zh-cn"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<script src="./react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var style = {
color : "red",
border: "1px #000 solid",
};
var HelloWorld = React.createClass({
render: function(){
return <p>你好， {
(function(obj){
if(obj.props.name)
return obj.props.name
else
return "World!"
}(this))
}</p>;
}
});
React.render(<div style={style}><HelloWorld name="李小龙!"></HelloWorld></div>, document.body);
</script>
</body> </html>
运行结果：
React 万能的函数表达式的更多相关文章
- Javascript高级编程学习笔记（24）—— 函数表达式（2）闭包
昨天的文章中主要记录了,函数表达式与函数声明的区别 以及在JS中如何安全地使用递归 那么既然要深入地理解JS中的函数,闭包就是一个绕不开的概念 闭包 JS高编一书中对闭包的概念定义如下: 闭包是指有权 ...
- 立即执行函数表达式（IIFE）
原文地址:benalman.com/news/2010/11/immediately-invoked-function-expression/ 译者:nzbin 也许你还没有注意到,我是一个对术语比较 ...
- JavaScript 函数表达式
JavaScript中创建函数主要有两种方法:函数声明和函数表达式.这两种方式都有不同的适用场景.这篇笔记主要关注的是函数表达式的几大特点以及它的使用场景,下面一一描述. 主要特点 可选的函数名称 函 ...
- JavaScript函数表达式、闭包、模仿块级作用域、私有变量
函数表达式是一种非常有用的技术,使用函数表达式可以无需对函数命名,从而实现动态编程.匿名函数,是一种强大的方式,一下总结了函数表达式的特点: 1.函数表达式不同于函数声明,函数声明要求有名字,但函数表 ...
- javascipt的【函数表达式】
函数表达式 在编程时,我们可以看到不管是什么类库,jquery也好,zepto也好,都会用到大量的命名函数和匿名函数表达式,本节点就是为了弄懂为何会有这些函数表达式,以及在什么情况下会使用到这些表达式 ...
- js函数表达式和函数声明的区别
我们已经知道,在任意代码片段外部添加包装函数,可以将内部的变量和函数定义"隐 藏"起来,外部作用域无法访问包装函数内部的任何内容. 例如: var a = 2; function ...
- js立即调用的函数表达式
1.多种实现 // 下面2个括弧()都会立即执行 (function () { /* code */ } ()); // 推荐使用这个 (function () { /* code */ })(); ...
- 深入理解javascript系列（4）：立即调用的函数表达式
本文来自汤姆大叔 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法 ...
- 一步步学习javascript基础篇（6）：函数表达式之【闭包】
回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; } //函数声明语法定义 2. var sum = funct ...
随机推荐
- FPGA中如何实现除法？
摘自:<xilinx FPGA 开发实用教程> 1)被除数重复的减去除数,直到检测到余数小于除数为止,优点:对于除数与被除数相差较小的情况下合适 2)通过如下图片方式实现+状态机.优点:挺 ...
- [vsftp服务]——ftp虚拟用户、权限设置等的实验
搭建ftp服务器,满足以下要求: 1.允许匿名用户登录服务器并下载文件,下载速度设置为最高2MB/s 2.不允许本地用户登录ftp服务器 3.在服务器添加虚拟用户vuser01.vuser02.vus ...
- 用vs2013编译lua源码方法
1.下载lua源码:lua-5.2.3.tar.gz,解压 2.用vs2013建立一个win32工程: 1)下载后解压到一个目录下,这里假设解压到 F:\lua-5.2.3 注意下载的版本,如果是 ...
- Android -- TabHost、Fragment、状态保存、通信
工程结构 TabAFm到Ta ...
- javascript权威指南第六版学习
第二章 语法结构 2.1 字符集 什么是字符集?各种字符集什么关系?unicode,utf-8是什么关系? 字符(Character)是各种文字和符号的总称,包括各国家文字.标点符号.图形符号.数字等 ...
- 在windows下用eclipse + pydev插件来配置python的开发环境
在windows下用eclipse + pydev插件来配置python的开发环境 一.安装 python 可以到网上下个Windows版的python,官网为:https://www.python. ...
- 用PHP对数据库数据进行删除
显示页面: <body> <table width="100%" border="1" cellpadding="0" c ...
- hdu 3068 最长回文 manacher
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3068 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度.回文就是正 ...
- 【POJ】【1821】Fence
DP/单调队列优化 题意:k个人粉刷总长为n的墙壁(或者说栅栏?),每个人有一个必刷点s[i](这个人也可以一点也不刷,如果刷就必须刷这个点),最大粉刷长度l[i](必须是连续粉刷一段),和粉刷一格的 ...
- 【转】CSS实现div的高度填满剩余空间
转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用 ...