<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
面向对象
1. 构造函数(类)方式: new 构造函数名()
使用new 关键字调用的函数,是构造函数,构造函数是专门用来创建对象的函数
var obj = new Object();
2. 字面量方式---只需要一个时用
var 对象名 = {
属性名:属性值,
属性名:属性值
};
3. 自定义构造函数
3.1 使用工厂方法创建对象
- 通过该方法可以大批量的创建对象
- 使用工厂方法创建的对象,使用的构造函数都是Object
所以创建的对象都是Object这个类型,就导致我们无法区分出多种不同类型的对象
- 不符合程序员创建对象的行为习惯(new)
function crearPerson(){}
var obj = crearPerson();
3.2 升级后的工厂模式 === 构造函数 -- 模板 (e1.1)
function Person(name,age,sex){
this.name = name;
...
}
let obj = new Person('小美女',18,'女');
- 描述一下构造函数创建对象时的整个过程(new对象时,具体做了哪些事?)
1> 调用了构造函数
2> 系统会自动创建一个对象
3> 系统会自动返回一个对象
4> 在构造函数中的this指向 new出来的实例对象
- 构造函数的缺点:
构造函数中的内容,只要new一个对象,构造函数中的内容就会重新开辟一次空间,所以造成了大量内存浪费。
3.3 为解决构造函数的缺点-------》原型对象(e1.2)
3.4 各取优点,取构造函数和原型对象的优点
function Dog(name){
//在构造函数中写实例属性
this.name = name;
}
//在对象原型中写原型方法
Dog.prototype.fn = function(){}
let dog = new Dog('nana');
-->
</body>
<script>
//使用工厂方法创建对象
function crearPerson(name,age,gender){
//手动创建对象
var obj = new Object();
//手动添加属性
// obj.name = "1";
// obj.age = "11";
// obj.gender= 12;
obj.name = name;
obj.age = age;
obj.gender= gender;
obj.sayName = function(){
alert(this.name);
};
//手动返回对象
return obj;
}
var obj1 = crearPerson(1,2,3);
var obj2 = crearPerson(4,5,6);
var obj3 = crearPerson(7,8,9);
var obj4 = crearPerson(1,4,7);
console.log(obj1);
console.log(obj2);
console.log(obj3);
// 升级后的工厂模式 === 构造函数 -- 模板
function Person(name,age,sex){
//自动创建对象
//手动添加成员
this.name = name;
this.age = age;
this.sex = sex;
//自动返回对象
}
let obj = new Person('小美女',18,'女');
//各取优点,取构造函数和原型对象的优点
//构造函数
function Dog(name,age){
//实例属性
this.name = name;
this.age = age;
//实例方法
this.eat = function(){
return '吃吃';
}
}
//原型方法
Dog.prototype.eat = function(){
return '吃';
}
let dog = new Dog('小黄',3);
dog.eat = function(){
return '吃吃吃';
}
let dog1 = new Dog('小黑',2);
console.log(dog.name);
console.log(dog.eat());//依次向上查找
console.log(dog.toString());
console.log(dog);
console.log(dog.hehe);//null
</script>
</html>
e1.1
<!--
构造函数的语句:
function 构造函数名-大驼峰命名([参数]){
//属性
this.属性名 = 属性值;
//方法
this.方法名 = function(){
//功能
}
}
创建一个构造函数,专门用来创建对象的
构造函数就是一个普通的函数,创建方式和普通函数没有区别,
不同的是构造函数习惯上首字母大写
调用方式
构造函数和昔通函数的区别就是调用方式的不同
普通函数是直接调用,而构造函数需要使用new关键字来调用
构造函数的执行过程
1.立即创建一个新对象
2.将新建的对象设置为函数中的this ,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造对象创建的对象,我们称为一类对象,也将一个构造函数称为一个类
我们将通过一个构造函数创建的对象,称为该类的实例
instanceof可以检测一个对象是否是一个类的实例
-->
e1.2
<!--
//原型:原型的空间是共享。原型空间只开辟一次。
//1. 每一个函数都有一个属性prototype,通过这个属性可以找到该函数对应的原型对象。
//2. 每一个对象都有一个属性__proto__ ,通过这个属性可以找到该对象对应的原型对象。
//原型对象通过__proto__,找到父级原型对象,一级一级向上查找的过程,原型链,最终找到的是null
//3. 每一个原型对象都有一个属性constructor,通过这个属性可以找到该原型对象对应的构造函数。
// 数组的原型对象 == 数组的原型对象
console.log(Array.prototype === [].__proto__); //true
// 数组的构造函数 == 数组对象.原型.构造器
console.log(Array === [].__proto__.constructor); //true
// 数组的原型对象的父级原型对象 == Object的原型对象
console.log(Array.prototype.__proto__ === Object.prototype); //true
// 数组的原型对象的父级原型对象的父级原型对象 === null
console.log(Array.prototype.__proto__.__proto__ === null); //true
-->