构造函数new的工作原理
工厂函数：用于批量创建对象的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
1.面向对象 ： 是一种注重结果的思维方式
面向对象思维 ： 注重结果
面向过程思维 ： 注重过程
2.面向对象 与 面向过程的关系
* 面向对象本质 ： 对面向过程的一种封装
3.构造函数创建对象（new关键字四个工作流程）
*/
/*学习路线
1.介绍创建多个对象需求
2.介绍函数封装来创建多个对象 （工厂函数）
3.引入最终目标： 构造函数
*/
//1.需求：创建3个人对象 （姓名name,年龄age,性别sex）
//弊端：（1）代码冗余 （2）维护不便
// let person1 = {
// name:'林哥',
// age:32,
// sex:'男'
// }
// let person2 = {
// name:'班长',
// age:38,
// sex:'男'
// }
// let person3 = {
// name:'王悦',
// age:28,
// sex:'男'
// }
//2.使用函数创建对象 : 解决创建多个对象代码冗余
//工厂函数 ：
function createPerson (name, age, sex) {
//(1)创建空对象
let p = {}
//(2)对象赋值
p.name = name
p.age = age
p.sex = sex
//(3)返回创建好的对象
return p
}
let p1 = createPerson('林哥', 32, '男')
let p2 = createPerson('班长', 38, '男')
let p3 = createPerson('王悦', 28, '男')
console.log(p1, p2, p3)
</script>
</body>
</html>
构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
1.面向对象 ： 是一种注重结果的思维方式
面向对象思维 ： 注重结果
面向过程思维 ： 注重过程
2.面向对象 与 面向过程的关系
* 面向对象本质 ： 对面向过程的一种封装
3.构造函数创建对象（new关键字四个工作流程）
构造函数： 使用new关键字调用的函数
(1)创建空对象
(2)this指向这个对象
(3)对象赋值
(4)返回对象
*/
/*学习路线
1.介绍创建多个对象需求
2.介绍函数封装来创建多个对象 （工厂函数）
3.引入最终目标： 构造函数
*/
//2.使用函数创建对象 : 解决创建多个对象代码冗余
//工厂函数 ： 创建对象
function createPerson (name, age, sex) {
//(1)创建空对象
let p = {}
//(2)对象赋值
p.name = name
p.age = age
p.sex = sex
//(3)返回创建好的对象
return p
}
let p1 = createPerson('林哥', 32, '男')
let p2 = createPerson('班长', 38, '男')
let p3 = createPerson('王悦', 28, '男')
console.log(p1, p2, p3)
/*构造函数作用与工厂函数一致，都是创建对象。但是构造函数代码更加简洁
1.构造函数 ： 使用new关键字调用一个函数
*/
function Person (name, age, sex) {
//(1)创建空对象 {}
//(2)将this指向这个对象 this = {}
//(3)对象赋值
this.name = name
this.age = age
this.sex = sex
//(4)返回这个对象 return this
}
let person1 = new Person('林哥', 32, '男')
let person2 = new Person('班长', 38, '男')
let person3 = new Person('王悦', 28, '男')
console.log(person1, person2, person3)
/* 声明一个空函数 */
// function fn () {}
// let res1 = fn() //普通函数
// let res2 = new fn() //构造函数
// console.log(res1, res2)
</script>
</body>
</html>
原型对象
- 原型：任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应的对象，称之为原型对象
- 同时解决内存浪费与全局变量污染的问题
- 谁可以访问原型对象中的成员(属性和方法)
- 构造函数自身：`构造函数名.prototype`
- 构造函数实例化的每一个对象：点语法直接访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.学习目标
a. 原型 ：每一个函数被创建的时候，系统都会自动创建与之对应的对象，称之为原型对象
b. 作用： 解决 构造函数 （1）内存资源浪费 （2）全局变量污染
c. 怎么用： （1）构造函数.prototype (2)实例化对象直接访问
2.学习路线
(1)复习js构造函数new的工作原理
(2)引出构造函数的弊端 ： 浪费内存性能
(3)引出解决方案 ： 函数 ->全局变量污染
(4)引出对象 -> 内存资源浪费 + 全局变量污染
(5)引出原型对象
*/
//1.构造函数 ： 调用一个函数使用了new关键字
// 构造函数中的方法 弊端 ： 浪费内存资源
/*new关键字工作原理
//(1)创建空对象 {}
//(2)this指向这个对象 this = {}
//(3)执行赋值代码
//(4)返回这个对象 return this
*/
// function Person(name,age){
// //(1)创建空对象 {}
// //(2)this指向这个对象 this = {}
// //(3)执行赋值代码
// //(4)返回这个对象 return this
// this.name = name;
// this.age = age;
// this.sayHi = function(){
// console.log('猴赛雷呀，我爱林哥哟');
// }
// };
// let p1 = new Person('班长',28);
// console.log(p1);
// p1.sayHi();
// let p2 = new Person('班花',18);
// p2.sayHi();
// //每一个对象的方法都不是同一个
// console.log(p1.sayHi == p2.sayHi);//false
//2. 使用全局函数 ： 解决内存资源浪费问题
//弊端 ： 全局变量污染的问题
// function fn(){
// console.log('猴赛雷呀，我爱林哥哟');
// };
// function eat(){
// console.log('中午我要以面向对象的形式吃个饭');
// };
// function Person(name,age){
// //(1)创建空对象 {}
// //(2)this指向这个对象 this = {}
// //(3)执行赋值代码
// //(4)返回这个对象 return this
// this.name = name;
// this.age = age;
// this.sayHi = fn;
// this.eat = eat;
// };
// let p1 = new Person('班长',28);
// console.log(p1);
// p1.sayHi();
// let p2 = new Person('班花',18);
// p2.sayHi();
// console.log(p1.sayHi == p2.sayHi);//true
//3.使用对象 解决 ： （1）解决内存资源浪费 （2）全局变量污染
//弊端 ： 对象自身还是全局的，造成新的全局变量污染
// let obj = {
// fn:function(){
// console.log('猴赛雷呀，我爱林哥哟');
// },
// eat:function(){
// console.log('中午我要以面向对象的形式吃个饭');
// }
// }
// function Person(name,age){
// //(1)创建空对象 {}
// //(2)this指向这个对象 this = {}
// //(3)执行赋值代码
// //(4)返回这个对象 return this
// this.name = name;
// this.age = age;
// this.sayHi = obj.fn;
// this.eat = obj.eat;
// };
// let p1 = new Person('班长',28);
// console.log(p1);
// p1.sayHi();
// let p2 = new Person('班花',18);
// p2.sayHi();
// console.log(p1.sayHi == p2.sayHi);//true
/* 4.使用原型 ： */
/* 4.1 原型 ： 每一个构造函数在声明的时候，系统会自动的创建一个与之对应的对象，
称之为原型对象
*/
function Person(name,age){
this.name = name;
this.age = age;
};
/*4.2 如何获取原型对象
每一个函数都有一个 prototype 属性，指向这个原型对象
*/
console.log(Person.prototype);
/*
4.3 既然原型是一个对象 ： 用于存储数据
*/
Person.prototype.sayHi = function(){
console.log('林哥我爱你');
};
/*
4.4 谁可以访问 原型中的成员（属性+方法）
a. 构造函数自身 ： 构造函数名.prototype
b. 这个构造函数所创建(实例化)的每一个对象
*/
// 实例化对象
let p1 = new Person('班长',18);
p1.sayHi();
//实例化对象
let p2 = new Person('班花',20);
p2.sayHi();
console.log(p1.sayHi === p2.sayHi);//true
</script>
</body>
</html>
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
