函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="text/javascript">
/*
函数:
函数也是一个对象
函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
函数中可以保存一些代码在需要时使用
创建一个函数对象
var fun = new Function();
使用typeof检查一个函数对象时,会返回function
可以将要封装的代码以字符串的形式传递给构造函数
封装到函数中的代码不会立即执行
函数中的代码会在函数调用的时侯执行
调用函数语法:
函数对象()
当调用函数时,函数中封装的代码会按照顺序执行
使用函数声明来创建一个函数
语法:
function函数名([形参1,形参2,...形参N]){
语句
}
使用函数表达式来创建一个函数
语法:
var 函数名 = function([形参1,形参2...形参N]){
语句...
}
*/
var fun = new Function("console.log('BanQ');");
fun();
function fun1() {
console.log('BanQ');
}
fun1();
var fun2 = function () {
console.log('BanQ');
}
fun2();
/*
函数的参数:
可以在函数的(()中来指定一个或多个形参(形式参数)
多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
在调用函数时,可以在()中指定实参(实际参数)
实参将会赋值给函数中对应的形参
调用函数时解析器不会检查实参的类型,
所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
函数的实参可以是任意的数据类型
调用函数时,解析器也不会检查实参的数量
多余实参不会被赋值
如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
实参可以是任意的数据类型,也可以是一个对象
当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
实参可以是一个对象,也可以是一个函数
*/
var sum = function (a, b) {
console.log(a + b);
}
sum(1, 2);
/*
函数的返回值:
可以使用return来设置函数的返回值
语法:
return 值
return后的值将会作为函数的执行结果返回
在函数中return后的语句都不会执行
如果return语句后不跟任何值就相当于返回一个undefined
如果函数中不写return,则也会返回undefined
return后可以返回任意类型的值,也可以是一个对象,也可以是一个函数
*/
var result = function (a, b) {
return a + b;
}
console.log(result(1, 2));//输出 a+b 的结果
/*
立即执行的函数:
函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次
语法:
函数对象()
*/
(
function () {
console.log("BanQ");
}
)();
</script>
</head>
<body>
</body>
</html>
方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="text/javascript">
/*
方法:
函数也可以称为对象的属性,
如果一个函数作为一个对象的属性保存,那么我们称这个函数时这个对象的方法
调用这个函数就说调用对象的方法(method)
但是它和函数只是名称上的区别,没有其他的区别
*/
var num = 123;
console.log(num.toString());
</script>
</head>
<body>
</body>
</html>
作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="text/javascript">
/*
作用域
作用域指一个变量的作用的范围
在JS中一共有两种作用域。
全局作用域
直接编写在script标签中的JS代码,都在全局作用域
全局作用域在页面打开时创建,在页面关团时销毁
在全局作用域中有一个全局对象window,
它代表的是一个浏览器的窗口,它由浏览器创建,我们可以直接使用
在全局作用域中,
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
函数作用域
调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
在函数作用域中可以访问到全局作用域的变量
在全局作用域中无法访间到函数作用域的变量
当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用
如果没有则向上一级作用域中寻找,直到找到全局作用域,
如果全局作用域中依然没有找到,则会报错ReferenceErrorl
在函数中,不适用var声明的变量都会成为全局变量
定义形参就相当于在函数作用域中声明了变量
*/
var fun = function () {
var a = 1;
console.log(a);
}
console.log(a);//输出 undefined
var a = 1;
console.log(window.a);//输出 1
console.log(window.fun());//输出 1
/*
变量的声明提前
使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)
但是如果声明变量时不适用var关键字,则变量不会被声明提前
函数的声明提前
使用函数声明形式创建的函数function函数(){}
它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
使用函数表达式创建的函数。不会被声明提前,所以不能在声明前调用
在函数作用域也有声明提前的特性
使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
函数声明也会在函数中所有的代码执行之前执行
*/
fun1();//不报错
fun2();//报错
function fun1() {
console.log("BanQ");
}
var fun2 = function () {
console.log("BanQ");
}
</script>
</head>
<body>
</body>
</html>
this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="text/javascript">
/*
this:
解析器在调用函数每次都会向函数内部传递进一个隐含的参数
这个隐含的参数就是this
this指向的是一个对象
这个对象我们称为函数执行的上下文对象
根据函数的调用方式的不同,this会指向不同的对象
以函数的形式调用时,this永远都是window
以方法的形式调用时,this就是调用方法的那个对象
*/
function fun(a,b){
console.log(this);//输出 Window....
}
fun();
</script>
</head>
<body>
</body>
</html>
构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
构造函数:
使用工厂方法创建的对象,使用的构造函数都是Object
所以创建的对象都是Object这个类型
就导致我们无法区分出多种不同类型的对象
创建一个构造函数,专门用来创建Person对象的
构造函数就是一个昔通的函教,创建方式和普通函数没有区别,
不同的是构造函数习惯上首字母大写
构造函数和昔通函数的区别就是调用方式的不同
普通函数是直接调用,而构造函数需要使用new关键字来调用
构造函数的执行流程:
立刻创建一个新的对象
将新建的对象设置为函数中this
逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
我们将通过一个构造函头创建的对象,称为是该类的实例
使用 instanceof 可以检查一个对象是否是一个类的实例
如果是则返回true,否则返回false
所有的对象都是Object的后代
所以任何对象和Object做instanceof检查时都会返回true
this的情况:
当以函数的形式调用时,this是window
当以方法的形式调用时,谁调用方法this就是谁
当以构造函数的形式调用时,this就是新创建的那个对象
*/
function Person() {
this.name = "banq";
this.age = 22;
}
var a = Person();//普通函数
var b = new Person();//构造函数
console.log(b);//输出 name = 'banq' age = 22
console.log(b instanceof Person);//输出 true
/*
*/
</script>
</head>
<body>
</body>
</html>
原型对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
原型(prototype):
我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象,这个对象就是我们所谓的原型对象
如果函数作为普通函数调用,prototype没有任何作用
当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,
指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,
我们可以将对象中共有的内容,统一设置到原型对象中
当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,
如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用
以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
使用该方法只有当对象自身中含有属性时,才会返回true
原型对象也是对象,所以它也有原型,
当我们使用一个对象的居性或方法时,会现在自身中寻找,
自身中如果有,则直接使用,
如果没有则去原型对象中寻找,如果原型对象中与,则使用,
如果没有则去原型的原型中寻找,直到找到Object对象的原型
object对象的原型没有原型,如果在object中依然没有找到,则返回undefined
*/
function A() {
}
function B() {
}
console.log(A.prototype == B.prototype);//输出 false
var a = new A();
console.log(a.__proto__);//输出 Object
console.log(a.__proto__ == A.prototype);//输出 true
// 向原型对象中添加属性
A.prototype.test = "BanQ";
console.log(a.test);//输出 BanQ
// 寻找该对象中是否有该属性
console.log(a.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//输出 true
/*
当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
如果我们希望在输出对象时不输出[object object],可以为对象添加一个toString()方法
*/
function Person() {
}
var c = new Person();
console.log(c);//输出 Person
console.log(c.toString());//输出 Object
c.toString = function () {
return "BanQ";
}
console.log(c);
</script>
</head>
<body>
</body>
</html>