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 相关文章推荐
jquery的live使用注意事项
Feb 18 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
Vue.js基础知识小结
Jan 13 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
jquery实现图片左右切换的方法
2015/05/07 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现批量改文件名称的方法
2015/05/25 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python编程中的文件操作攻略
2015/10/16 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
详解python metaclass(元类)
2020/08/13 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
少先队入队活动方案
2014/02/08 职场文书
二手房购房意向书范本
2014/04/01 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
甜品店创业计划书
2014/08/14 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
OpenCV实现常见的四种图像几何变换
2022/04/01 Python