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

我可以不吃啊 · 2024-7-26 14:52:00

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>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块