【前端】JavaScript入门及实战61-65

子非鱼921

于 2024-07-21 14:53:09 发布

阅读量294

点赞数 9

分类专栏：前端-JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45980065/article/details/140587452

版权

前端-JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

61 this(1)
62 this(2)
63 对象
64 构造函数(1)
65 构造函数(2)

61 this(1)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		解析器再调用函数每次都会向函数内部传递进一个隐含的参数，
		这个隐含的参数就是this，this指向的是一个对象，
		这个对象我们称为函数执行的上下文对象，
		根据函数调用方式的不同，this会指向不同的对象
			1. 以函数的形式调用时，this永远都是window
			2. 以方法的形式调用时，this就是调用方法的那个对象		
	*/
	
	function fun(a, b){
		//console.log(a + b);
		//console.log(this); // object window
		console.log(this.name);
	}
	
	fun(123, 456);
	
	// 创建一个对象
	var obj = {
		name: "孙悟空";
		sayName: fun
	};
	
	//console.log(obj.sayName == fun); // true
	//obj.sayName(); // object，this就是obj
	var name = "全局的name属性";
	fun(); // window // window.name->"全局的name属性"
	
	// 以方法的形式调用，this是调用方法的对象
	obj.sayName(); // "孙悟空"	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

62 this(2)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	// 创建一个name变量
	var name = "全局";
	
	// 创建一个fun()函数
	function fun(){
		console.log(name); // "全局"
		console.log(this.name); // "孙悟空"
	}
	
	// 创建两个对象
	var obj = {
		name: "孙悟空",
		sayName: fun
	};
	
	// 创建两个对象
	var obj2 = {
		name: "沙和尚",
		sayName: fun
	};
	
	obj.sayName();	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

63 对象

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">	
	// 创建一个对象
	var obj = {
		name: "孙悟空",
		age: 18,
		gender: "男",
		sayName: function(){
			alert(this.name);
		}
	};
	
	var obj2 = {
		name: "猪八戒",
		age: 28,
		gender: "男",
		sayName: function(){
			alert(this.name);
		}
	};

	var obj3 = {
		name: "沙和尚",
		age: 38,
		gender: "男",
		sayName: function(){
			alert(this.name);
		}
	};
	
	/*
		使用工厂方法创建对象
		通过该方法可以大批量的创建对象
	*/
	function createPerson(name, age, gender){
		// 创建一个新的对象
		var obj = new Object();
		
		// 向对象中添加属性
		obj.name: name,
		obj.age: age,
		obj.gender: gender,
		obj.sayName: function(){
			alert(this.name);
		}
		
		// 将新的对象返回
		return obj;
	}
	
	var obj5 = createPerson("孙悟空", 18, "男");
	var obj6 = createPerson("白骨精", 18, "女");
	var obj7 = createPerson("唐三藏", 28, "男");
	obj5.sayName(); // 白骨精
	
	// 创建狗的对象
	function createDog(name, age){
		var obj = new Object();
		obj.name: name,
		obj.age: age,
		obj.sayName: function(){
			alert("汪汪汪");
		}
		return obj;
	}
		
	// 创建一个狗的对象
	var dog = createDog("旺财", 3);
	
	/*
		使用工厂方法创建的对象，使用的构造函数都是Object，
		所以创建的对象都是Object这个类型，
		就导致我们无法区分处多种不同种类的对象
	*/	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

64 构造函数(1)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	
	/*
		创建一个构造函数，专门用来创建Person对象的，
		构造函数就是一个普通的函数，创建方式和普通函数没有区别，
		不同的是构造函数习惯上首字母大写
		
		构造函数和普通函数的区别就说调用方式的不同，
		不同函数是直接调用。构造函数需要使用new关键字来调用
		
		构造函数的执行流程
		1. 立刻创建一个新的对象
		2. 将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
		3. 逐行执行函数中的代码
		4. 将新建的对象作为返回值返回
		
		使用同一个构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类，
		我们通过一个构造函数创建的对象，称为该类的实例
		
		this的情况：
		1. 当以函数的形式调用时，this是window
		2. 当以方法的形式调用时，谁调用方法this就是谁
		3. 当以构造函数的形式调用时，this就是新创造的那个对象
	*/
	
	function Person(name, age, gender){
		this.name = name;
		this.age = age;
		this.gender = gender;
		this.sayName = function(){
			alert(this.name);
		};
	}
	
	var per = new Person("孙悟空", 18, "男");
	
	function Dog(){
		
	}
	
	var per = new Dog();
	
	/*
		使用instanceof可以检查一个对象是否是一个类的实例
		语法：对象instanceof 构造函数
		如果是返回true，否则返回false
	*/
	console.log(per instanceof Person); //false
	alert(per instanceof Person);
	
	/*
		所有的对象都是Object的后代，
		所以任何对象和Object做instanceof检查时，都会返回true
	*/
	console.log(per instanceof Object); //true
</script>
<style>
</style>
</head>
<body>
</body>
</html>

65 构造函数(2)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*
		创建一个Person构造函数
			在Person构造函数中，为每一个对象都添加了一个sayName方法，
			目前我们的方法是在构造函数内部创建的，
			也就是构造函数每执行一次都会创建一个新的sayName方法，
			也就是所有实例的sayName都是唯一的。
			
			这样就导致了构造函数执行一次就会创建一个新的方法，
			执行10000次就会创建10000个新的方法，而10000个方法都是一样的，
			这事完全没有必要的
			
	*/
	function Person(name, age, gender){
		this.name = name;
		this.age = age;
		this.gender = gender;
		//向对象中添加一个方法
		this.sayName = fun;
	}
	
	//将sayName方法在全局作用域中定义
	/*
		将函数定义在全局作用域，污染了全局作用域的命名空间，
		而且定义在全局作用域中也很不安全
	*/
	function fun(){
		alert("Hello大家好，我是：" + this.name);
	};
	
	//向原型中添加sayName方法
	Person.prototype.sayName = function(){
		alert("Hello大家好，我是：" + this.name);
	};	
	
	//创建一个Person实例
	var per = new Person("孙悟空", 18, "男");
	console.log(per.sayName == per2.sayName); // false		
</script>
<style>
</style>
</head>
<body>
</body>
</html>

子非鱼921

关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【前端】JavaScript入门及实战61-65

2. 将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象。执行10000次就会创建10000个新的方法，而10000个方法都是一样的，使用同一个构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类，// object，this就是obj。2. 以方法的形式调用时，this就是调用方法的那个对象。3. 当以构造函数的形式调用时，this就是新创造的那个对象。使用工厂方法创建的对象，使用的构造函数都是Object，这个隐含的参数就是this，this指向的是一个对象，
复制链接

扫一扫