js函数和this用法实例分析


Posted in Javascript onMarch 13, 2020

本文实例讲述了js函数和this用法。分享给大家供大家参考,具体如下:

js的所有代码都是由funtion组成,funtion即函数的类型。

一.函数有两种写法

-----1.定义式

function test() { //定义一个函数
    console.log("function test called!!");
}

-----2.变量式

var test2 = function () {
    console.log("var test2 function called!!");
};

我们可以调用typeof()查看类型

var type = typeof(test2);
console.log(type); //function

二.函数也是对象

-----1.函数既然是对象,即就可以有属性和功能。函数也可以动态的增加属性,如下:

function test() {
    console.log("function test() called!!!");
}
test.user_name = "zhangsan";
console.log(test.user_name); //zhangsan

三.函数的实例化

    函数的实例化也有两种方式:

---------1.直接在函数名后面加上"()"         @@@@@常用这种方式

function test() {
    console.log("function test() called!!!");
}
test(); //function test() called!!!

---------2.使用关键字"new"进行实例化

function test() {
    console.log("function test() called!!!");
}
new test(); //function test() called!!!

四.this机制

//=====================this机制==================
function my_func(rhs, lhs) {
    console.log(this, rhs, lhs);
}
 
//显示不确定的this
//my_func(); //console显示
 
//--------------显示传递this-----------
//函数名.call(this,参数...) 显示传递this
my_func.call({ 0: "jade" }, 2, 3);
//------------------------------------
 
var tools = {
    my_func: my_func,
};
 
//表.key() --->this是表
tools.my_func(2, 3); //this是tools
// 相当于
tools.my_func.call(tools, 2, 3);
 
//强制绑定this,优先级最高
//函数.bind,不会改变原来函数对象的this,而是会产生一个新的临时的对象
//bind好了this
var new_func = my_func.bind({ name: "jade" });
new_func(3, 4);
 
tools.my_func = new_func;
tools.my_func(3, 4); //this是表{name:"jade"}
my_func(3, 4); //this不变,consloe
 
//====call与bind有什么区别呢?==
//bind最牛的地方是什么?是绑定this的时候,
//不是由调用者来决定的
 
new_func.call({ 0: 1 }, 3, 4); //this还是表{name:"jade"},不是{0:1}
 
//==================总结=============================
//在函数里面访问this,this是由调用的环境来决定的,不确定,一般不使用
//1.显示的传递this,函数.call(this对象,参数)
//2.隐式的传递this,表.key_函数(参数),this---》表
//3.bind优先级别是最高的

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript一点特殊用法
May 28 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
js对象简介与基本用法示例
Mar 13 #Javascript
JS自定义滚动条效果
Mar 13 #Javascript
js Math数学简单使用操作示例
Mar 13 #Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 #Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 #Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 #Javascript
创建nuxt.js项目流程图解
Mar 13 #Javascript
You might like
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
PHP内核探索之变量
2015/12/22 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
简约JS日历控件 实例代码
2013/07/12 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
javascript中this指向详解
2016/04/23 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
利用Python破解验证码实例详解
2016/12/08 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
Linux操作面试题
2012/05/16 面试题
公司活动总结范文
2014/07/01 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL