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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
python自动生成证件号的方法示例
2021/01/14 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
美国鲜花递送:UrbanStems
2021/01/04 全球购物
SQL SERVER面试资料
2013/03/30 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
警察思想汇报
2014/01/04 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS