前端学习（JS学习第四天尚硅谷JS基础视频）_尚硅谷前端js教学视频-CSDN博客

本文链接：https://blog.csdn.net/hf3344587/article/details/120175167

文章目录

- 前端学习（JS学习第四天尚硅谷JS基础视频）

前端学习（JS学习第四天尚硅谷JS基础视频）

1. this关键字

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

以函数的形式调用时，this永远是window
以方法的形式调用时，this永远是调用方法的对象
对于this的补充的例子：

var name = "全局变量";
function fun() {
	console.log(this.name);//这里写成this.name会根据不同的调用者改变name的值
}

var obj = {
	name:"swk",
	sayName:fun
};

var obj2 = {
	name:"shs",
	sayName:fun
};

2. 工厂方法创建对象

使用工厂方法创建对象，通过该方法可以大批量创建对象。使用工厂方法创建的对象，使用的构造函数都是Object，所以创建的对象都是Object这个类型。

function createPerson() {
	var obj = new Object();
	obj.name = name;
	obj.age = age;
		obj.sayHello = function() {
			alert(this.name);
	}
	return obj;
}
var obj = {
	name:"swk",
	age:18,
	gender:"female",
	sayName:function(){
		alert(this.name);
	}
};
var obj2 = {
	name:"zbj",
	age:18,
	gender:"female",
	sayName:function(){
		alert(this.name);
	}
};
var obj3 = {
	name:"shs",
	age:18,
	gender:"female",
	sayName:function(){
		alert(this.name);
	}
};

3. 构造函数

构造函数就是一个普通的函数，创建方式和普通函数没有区别。不同的是构造函数习惯上首字母大写。如下代码所示：

function Person() {
}

构造函数和普通函数的区别就是调用方法不同。普通函数是直接调用，构造函数是使用new关键字来调用。调用代码如下所示：

var per = new Person();
console.log(per); //[object Object]

构造函数的执行流程：

调用构造函数，立即创建一个新的对象
将新建的对象设置为函数中的this，在构造函数中可以使用this，来引用新建的对象
逐行执行构造函数中的代码
将新建的对象作为返回值返回

function Person() {
	this.name = "swk";  //向新建的对象中添加属性
	this.age = 18;
	this.sayName = function(){
		alert(this.name);
	} 
}
var per = new Person();
console.log(per.name);

改造的构造方法，代码如下：

function Person(name, age) {
	this.name = name;  //this.的目的是向新建的对象中添加属性，如果不加this.作用域是整个window
	this.age = age;
	this.sayName = function(){
		alert(this.name);
	} 
}
var per = new Person();
console.log(per.name);

使用同一个构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类。将通过一个构造函数创建的对象，称为该类的实例。使用instanceof可以检查一个对象是否是一个类的实例。语法：对象 instanceof 构造函数
所有的对象都是Object的后代，所以任何对象和Object在instanceof检查时，都会返回true。
总结this的情况：

当以函数的形式调用时，this是window
当以方法的形式调用时，谁调用方法，this就是谁
当以构造函数的形式调用时，this就是新创建的那个对象
下面的代码，构造函数每执行一次，构造函数中的sayName方法都会被创建一次，所有实例的sayName方法都是唯一的。这样就导致了构造函数执行一次，就创建一个新的sayName方法，而每个sayName方法都是一模一样的，可以使所有的对象共享同一个方法。

function Person(name, age) {
	this.name = name;  //this.的目的是向新建的对象中添加属性，如果不加this.作用域是整个window
	this.age = age;
	this.sayName = function(){
		alert(this.name);
	} 
}
var per = new Person();
console.log(per.name);

对以上的代码进行修改，如下所示：

function Person(name, age) {
	this.name = name;  //this.的目的是向新建的对象中添加属性，如果不加this.作用域是整个window
	this.age = age;
	this.sayName = fun;
	} 
}
function fun(){
		alert(this.name);}
var per = new Person();
console.log(per.name);

以上代码将函数定义在全局作用域，污染了全局作用域的命名空间，而且定义在全局作用域中也很不安全。

4. 原型prototype

所创建的每一个函数，解析器都会向函数中添加一个prototype属性。这个属性对应着一个对象，这个对象就是原型对象。如果函数作为普通函数调用，prototype没有任何作用。当作为构造函数调用它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象。可以通过_proto_来访问该属性。

function MyClass() {
}
console.log(MyClass.prototype);
var mc = new MyClass();
console.log(mc._proto_);

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中共有的内容统一设置到原型对象中。
当访问对象的一个属性或方法时，会先在对象自身中寻找，如果有则直接使用；如果没有，则会去原型对象中寻找，如果找到则直接使用。同样，使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。因此要判断，对象自身中是否有某个属性，可以使用hasOwnProperty（）。

function MyClass() {
}
//向原型中添加属性
MyClass.prtotype.a = 123;
console.log(MyClass.prototype);
var mc = new MyClass();
console.log(mc.hasOwnProperty("name"));//false
console.log(mc.hasOwnProperty("hasOwnProperty"));//false
console.log(mc._proto_.hasOwnProperty("hasOwnProperty"));//false

原型对象也是对象，所以它也有原型。当使用一个对象的属性或方法时，会先在自身中寻找。如果没有，则去原型对象中寻找，如果原型对象中有，则使用。如果原型对象中没有，则去原型对象的原型中寻找，直到找到Object对象的原型，若依然没有找到，则返回undefined。Object对象的原型没有原型。

5. toString()方法

直接在页面中打印一个对象时，实际上是输出对象的toString()方法的返回值。toString()方法在Object原型中。如果希望在输出对象时，不输出[object Object]，可以为对象添加一个toString()方法。

5.1 for…in语句

语法：
for(var 变量 in 对象) {
}
对象中有几个属性，循环体机会执行几次。每次执行时，会将对象中的一个属性的名字赋值给变量。

var obj = {
	name :"zbj";
	age:"18",
	sayName:function(){
		console.log(obj2.name);
	}
};
for(var n in obj){
	console.log(obj[n]);//可以输出属性的值
}

6. 作用域

作用域指一个变量的作用的范围。在JS中有两种作用域，一是全局作用域，二是函数作用域。

6.1 全局作用域

直接编写在script标签中的JS代码，都在全局作用域。全局作用域在页面打开时创建，在关闭页面时销毁。在全局作用域中，有一个全局对象window，代表浏览器窗口，由浏览器创建，可以直接使用。
全局作用域中创建的变量，会作为window对象的属性保存。创建的方法都，会作为window对象的方法保存。
全局作用域中的变量，就是全局变量，在也免得任意部分都可以被访问到

6.1.1 变量的声明提前

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

console.log(a);
var a = 123;//提前声明，但是在这里赋值

6.1.2 函数的声明提前

使用函数声明形式创建的函数（function 方法名（）{}），在所有代码执行之前就被创建，所以可以在函数声明前调用函数。使用函数表达式创建的函数（var 函数名），不会被提前声明，所以不能在声明前调用。

//函数声明，会被提前创建
function fun() {
	console.log("fun")；
}
//函数表达式，不会被提前创建
var fun2 = function() {
	console.log("fun2")；
}

6.2 函数作用域

调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁。每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的。
在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量。
当在函数作用域操作一个变量时，会现在自身作用域中寻找，如果有就直接使用，如果没有就向上一级作用域中寻找，如果全局作用域中依然没有找到的话，则会报错ReferenceError。
在函数中要访问全局变量可以使用window对象。window.对象名调用。
在函数作用域中，也有声明提前的特性，使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。
在函数中，不使用var声明的变量都会成为全局变量。定义形参，就相当于在函数作用域中声明了变量

var a = 10；
//函数声明，会被提前创建
function fun() {
	console.log("fun")；
}
//函数表达式，不会被提前创建
var fun2 = function() {
	console.log("fun2")；
}

//变量和函数的提前声明，在函数作用域中依然适用
var fun3 = function() {
	fun4()
	console.log(a);
	var a = 35;
	function fun4() {
		alert("fun4");
}

var c = 33;
function fun5() {
//在函数中，不使用var声明的变量都会成为全局变量
	c = 10;
	d = 100;
}
fun5();
console.log(c); // 10。全局变量的c改变值
console.log(d); // 100。d没有使用var关键字，则会设置为全局变量。


var e = 23；
function fun6(e) {
	alert(e);//undefined
}
}