（JavaScript）前端小白还没学JS吗？跟着本文开启JS的旅程吧！（五）：JS特性-提前声明变量与函数；挖掘JS中的作用域范围，搞清楚调用的实际方法；刨析JS中的this关键字的指向内容

用户11865655

发布于 2025-10-13 17:34:23

3500

代码可运行

文章被收录于专栏：CSDN专栏CSDN专栏

运行总次数：0

代码可运行

声明提前

变量的声明提前

使用var关键字声明的变量，会在所有的代码执行之前被声明(但是不会赋值) ，但是如果声明变量时不使用var关键字，则变量不会被声明提前

函数声明提前

使用函数声明形式创建的函数function(){} 它会在所有的代码执行之前就被创建，所以我们在可以函数声明前来调用函数使用函数表达式创建的函数不会被声明提前

在函数作用域中也有声明提前的特性函数声明也会在函数中所有的代码执行前声明

console.log("num="+num);
var num=12;
console.log("num="+num);
fun();
//	fun2();
//函数声明的方式创建的函数，可以在创建前调用
function fun(){
	alert(123);
}
//函数表达式方式创建的函数，只能在创建之后调用
var fun2=function(){
	alert(456);
}
fun();
fun2();


function fun3(){
	console.log("c="+c);
	var c=34;
}
fun3();

JavaScript作用域

作用域：

作用域指一个变量的作用范围
JS中一共两种作用域
1. 全局作用域
2. 函数作用域(局部作用域)

全局作用域

直接写在script标签的JS代码，都在全局作用域全局作用域在页面打开的时候创建，在页面关闭时销毁在全局作用域中有一个对象window,它代表一个浏览器的窗口，它由浏览器创建，我们可以直接使用

在全局作用域中：

创建的变量都会作为window对象的属性保存
全局中的函数都会作为window对象的方法保存

全局作用域中的变量都是全局变量

在页面的任意的部分都可以访问到

var num=20;
function fun(){
	var a=12;
//		console.log(a);
//		console.log("函数体内访问num="+num);
}
fun();//作为函数调用
window.fun();//作为对象.函数名() 把fun叫做是windwo对象的方法
console.log("num="+num);
console.log(a);
console.log(typeof window);
console.log(window);

函数作用域

调用函数时创建函数作用域，函数执行完毕以后，作用域销毁每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的在函数作用域中可以访问全局变量，

但在全局作用域中无法访问到局部变量

当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，如果没有就向上一作用域中寻找，直到找到全局作用域，

如果全局作用域中仍然没有找到，则会报错ReferenceError 在函数中想要访问全局变量可以使用window 对象

vara="这是全局作用域中的变量a";
function fun2(){
//		var a="这是fun2中的变量a";
//		console.log(a);
	function fun3(){
//			console.log(a);
		console.log(window.a);
	}
	fun3()
}
fun2();
//	console.log(a);

this 关键字

解析器在调用函数每次都会向函数内部传递一个隐含的参数这个隐含的参数就是this,this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数调用方式不同，this会指向不同的对象

总结this：

以函数的形式调用时，this永远都是window
以方法的形式调用是，this就是调用方法的那个对象

function fun(a,b){//形参
	console.log("a="+a+", b="+b);
//		console.log(this);
}
fun(12,34);//实参

function sayHello(){
	console.log(this);
}
sayHello();
var obj={
	name:"zhangsan",
	sayWord:sayHello
};
obj.sayWord();//函数以方法的形式被调用时，this指向的是调用方法的对象

进阶：

var name="全部作用域中的变量name";
function fun(){
	console.log(this.name);
}
var obja={
	name:"zhangsan",
	sayWord:fun
};
var objb={
	name:"wangwu",
	sayWord:fun
};
fun();
//我们希望，调用fun方法的时候，他可以输出，对象的name属性
obja.sayWord();
objb.sayWord();

使用工厂方法创建对象

通过该方法可以大批量的创建对象

function creatPerson(name,age,gengder){
	var obj=new Object();
	obj.name=name;
	obj.age=age;
	obj.gender=gengder;
	obj.sayhello=function(){
		console.log("大家好！我是"+this.name);
	}
	return obj;
}

var person1=creatPerson("小蓝",23,"女");
var person2=creatPerson("小绿",20,"女");
console.log(person1);
person1.sayhello();
console.log(person2);
person2.sayhello();

console.log(typeof person1);
function createCat(name,age){
	var obj=new Object();
	obj.name=name;
	obj.age=age;
	obj.sayhello=function(){
		console.log("主人您好啊！我是"+this.name);
	}
	return obj;
}

使用工厂方法创建的对象，使用的构造函数都是Object

所以创建的对象都是Object这个类型就导致我们无法区分出多种不同类型的对象

var cat1=createCat("小淘",4);
var cat2=createCat("小白",2);
console.log(cat1);
console.log(cat2);
cat2.sayhello();
console.log(typeof person1);
console.log(typeof cat1);

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-07-13，如有侵权请联系 cloudcommunity@tencent.com 删除

作用域