JavaScript函数function

-王二毛-

已于 2022-03-04 22:31:14 修改

阅读量396

点赞数

分类专栏： # JavaScript 文章标签： javascript js

于 2021-03-30 15:36:24 首次发布

本文链接：https://blog.csdn.net/weixin_45084986/article/details/115327306

版权

JavaScript 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

函数function

函数也是一个对象
使用typeof检查时，会返回"function"

var fun =new Function();
console.log(typeof fun);//"function"

定义

1、使用函数声明创建函数
语法：function 函数名(形参…){ }
调用:函数名()
2、使用函数表达式创建函数
var fun = function (形参…){
console.log(“匿名函数”)
}
调用:fun()

调用

fun()//直接调用
obj.fun//通过对象调用
new fun()//new调用
fun.call(obj)或fun.apply(obj)//相当于obj.fun()，但是这只是临时让fun成为obj的方法调用
在这里插入图片描述

参数可以是一个对象

var fun =function(o){
	console.log(o.name+o.age+o.address);
}
var obj={
	name:'黑寡妇',
	age:25,
	address:'美国'
	}
fun(obj)

回调函数

1.什么函数才是回调函数?
	1).你定义的
	2).你没有调
	3).但最终它执行了
2.常见的回调函数? 
	dom事件回调函数
	定时器回调函数
	Ajax回调函数
	生命周期回调函数

在这里插入图片描述

IIFE立即函数（匿名函数自调用）

隐藏实现
不会污染外部（全局）命名空间

<script>
	// 立即执行函数
	// 函数定义完，立即被调用，这种函数叫做立即执行函数
	// 立即执行函数往往只会执行一次
	(
		function(){
			alert("你好帅啊");
		}
	)();
	(
		function(a, b){
			alert(a+b);
		}
	)(12,23);
</script>

在这里插入图片描述

构造函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*	
			创建一一个构造函数，专门]用来创建Person对象的
			构造函数就是一个普通的函数，创建方式和普通函数没有区别，
			不同的是构造函数习惯上首字母大写
			构造函数和普通函数的区别就是调用方式的不同!
			普通函数是直接调用，而构造函数需要使用new关键字来调用
			*/
			/*
			创建构造函数的过程
			1.立刻创建一个新的对象
			2.将新建的对象设置为函数中this ,在构造函数中可以使用thi s来引用新建的对象
			3.逐行执行函数中的代码
			4.将新建的对象作为返回值返回

			*/
			function Person(Name, Age) {
				this.name = Name;
				this.age = Age;
				this.personfun=fun;
			}
			function fun(){
				alert("将personfun方法在全局作用域中定义"+this.name)
			}
			var per = new Person("王二毛",18);
			console.log(per);
			per.personfun();
			/*使用instancof可以检查一个对象是不是一个类的实例*/
			console.log(per instanceof Person)
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

函数的方法 call(),apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用
当对函数调用call( )和apply( )都会调用函数执行
-在调用call( )和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this

call( )方法可以将实参在对象之后依次传递
apply( )方法需要将实参封装到一个数组中统- -传递

this的情况
1.以函数形式调用时，this永远都是window
2.以方法的形式调用时，this是调用方法的对象
3.以构造函数的形式调用时，this是新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象
fun.call(obj);
fun.apply(obj);

call()

fun.call(obj,1,3);

var obj = {}
function test2() {
	this.xxx = 'atguigu';
}
//obj. test2()不能直接， 根本就没有
test2.call(obj); // obj. test2() // 可以让一个函数成为指定任意对象的方法进行调用
console.log(obj.xxx);//atguigu

apply()

argument

在调用函数时，浏览器每次都会传递进两个隐含的参数:
1.函数的上下文对象this
2.封装实参的对象arguments
arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度
在调用函数时，我们所传递的实参都会在arguments中保存
arguments . length可以用来获取实参的长度
-我们即使不定义形参，也可以通过argument s来使用实参，
只不过比较麻烦
arguments[e]表示第一个实参
arguments[1]表示第二个实参。
-它里边有一个属性叫做callee,
这个属性对应一个函数对象，就是当前正在指向的函数的对象

Date

Math

包装类

函数中的this

1、this是什么?

任何函数本质上都是通过某个对象来调用的，如果殴有直接指足就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象

2、如何确定this 的值?

test()//: window
p.test()//: p
new test()//: 新创建的对象
p.call(obj)//: obj

函数的prototype

1.函数的prototype属性

每个函数都有一个prototype属性，它默认指向object空对象(即称为:原型对象)
原型对象中有一个属性constructor,它指向函数对象
2.给原型对象添加属性( 一般都是方法)
作用:函数的所有实例对象自动拥有原型中的属性(方法)

1. 每个函数function都有一个prototype， 即显式原型
2.每个实例对象都有一个__ proto__ ，可称为隐式原型
3. 对象的隐式原型的值为其对应构造函数的显式原型的值
4. 内存结构(图)
5. 总结:
	*函数的prototype属性:在定义函数时自动添加的，默认值是一个空0bject对象
	*对象的__proto__ 属性:创建对象时自动添加的。默认值为构造函数的prototype属性值
	*程序员能直接操作显式原型，但不能直接操作隐式原型(ES6之前)

在这里插入图片描述

原型链

<!--
1、原型链(图解)
	*访问一个对象的属性时，
	*先在自身属性中查找，找到返回
	如果没有再沿着_ proto__ 这条链向 上查找，找到返回
	*如果最终没找到，返@undefined
	*别名:隐式原型链
	*作用:查找对象的属性(方法)
2. 构造函数/原型/实体对象的关系(图解)
3. 构造函数/原型/实体对象的关系2(图解)

在这里插入图片描述

1. 读取对象的属性值时:会自动到原型链中查找
2. 设置对象的属性值时:不会查找原型链，如果当前对象中没有此属性， 直接添加此属性并设置其值
3. 方法一 -般定义在原型中，属性-般通过构造函数定义在对象本身上

在这里插入图片描述

instanceof

1. instanceof. 是如何判断的?
	表达式: A instanceof B
	*如果B函数的显式原型对象在A对象的原型链上,返回true, 否则返回false
2. Function是通过new自己产生的实例

在这里插入图片描述

-王二毛-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录