JavaScript函数定义、对象特性及this机制详解
本文深入解析JavaScript中函数的核心概念,涵盖定义式与变量式两种写法,阐述函数作为对象可动态添加属性的特性,并对比直接调用与new实例化的区别。重点讲解this指向机制,包括通过call显式绑定、对象方法隐式绑定及bind优先级,帮助开发者理解不同调用环境下的this值。
JavaScript函数与this机制概述
本文通过具体实例详细解析JavaScript中函数的定义方式及其内部this关键字的工作机制,旨在为读者提供清晰的参考与学习路径。
在JavaScript中,所有代码逻辑均基于function构建,function不仅是关键字,更代表了函数的基本类型。
函数的定义方式与类型检查
一、函数的两种定义方式
-----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关键字的指向机制
//=====================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程序设计有所帮助。
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
