js函数和this用法实例分析

 更新时间:2020年03月13日 12:58:08   作者:jadeshu  
这篇文章主要介绍了js函数和this用法,结合实例形式分析了js函数和this基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

相关文章

  • layui的布局和表格的渲染以及动态生成表格的方法

    layui的布局和表格的渲染以及动态生成表格的方法

    今天小编就为大家分享一篇layui的布局和表格的渲染以及动态生成表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 深度解析JavaScript中的filter()方法

    深度解析JavaScript中的filter()方法

    在JavaScript中,filter()是一个数组方法,用于从数组中过滤出符合特定条件的元素,并返回一个新数组,本文将带大家深度解析JavaScript中的filter()方法,需要的朋友可以参考下
    2023-09-09
  • 实例解析package.json和最常见的scripts字段

    实例解析package.json和最常见的scripts字段

    日常开发中,现在的前端开发已经被三大框架取代,其中最主流的不过vue和react,而开发这些项目的时候不得不接触package.json这个文件,可你真的了解这个文件吗?今天给大家聊聊package.json和最常见的scripts字段,感兴趣的朋友一起看看吧
    2023-04-04
  • js遍历详解(forEach, map, for, for...in, for...of)

    js遍历详解(forEach, map, for, for...in, for...of)

    在本篇文章里小编给大家整理的是关于js中的各种遍历(forEach, map, for, for...in, for...of)相关知识点用法总结,需要的朋友们参考下。
    2019-08-08
  • 原生JavaScript实现Ajax异步请求

    原生JavaScript实现Ajax异步请求

    ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获取服务器端的功能来展示如何使用纯javascript实现ajax功能,以弄清其原理.
    2017-11-11
  • 微信通过页面(H5)直接打开本地app的解决方法

    微信通过页面(H5)直接打开本地app的解决方法

    这篇文章主要为大家详细介绍了微信通过页面(H5)直接打开本地app的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JavaScript实现消息对话框

    JavaScript实现消息对话框

    这篇文章主要为大家详细介绍了JavaScript实现消息对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • JS实现图片元素转BASE64编码的简单示例

    JS实现图片元素转BASE64编码的简单示例

    在Web开发中,我们经常需要将图片转换为Base64格式,以便在不依赖外部资源的情况下直接在HTML中使用,在这篇文章中,我将向您展示如何使用JavaScript将图片元素转BASE64编码,需要的朋友可以参考下
    2023-12-12
  • 学习LayUI时自研的表单参数校验框架案例分析

    学习LayUI时自研的表单参数校验框架案例分析

    本框架基于LayUI框架写的表单参数校验框架,本文分过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-07-07
  • js调试工具 Javascript Debug Toolkit 2.0.0版本发布

    js调试工具 Javascript Debug Toolkit 2.0.0版本发布

    Javascript Debug Toolkit是一个可以跨浏览器调试javascript的开源项目,支持在IE,FIREFOX,SAFARI,CHROME等浏览器中调试javascript。2.0.0版本做了较大变动,增加以下功能
    2008-12-12

最新评论