目录
一、原型(prototype)
特点:
每个函数都有一个prototype属性,也就是显示原型,默认指向一个object空对象。
原型对象中有一个属性constructor,它是指向函数对象。
可以给原型对象添加方法或者属性。
代码:
<!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>
</body>
<script>
// 所有函数都有原型对象
// 构造函数访问原型对象 prototype ---存放公共方法
// 实例对象访问原型对象 __proto__ ---存放公共方法
// constructor 构造方法 (原型对象创建的构造函数)
function Person(uname,age,sex){ //构造函数
this.uname = uname;
this.age = age;
this.sex = sex;
}
Person.prototype.fn = function(){// 原型对象上的方法
console.log("这是原型对象上的方法");
}
console.log("原型对象--- prototype",Person.prototype);
//实例化对象
let p = new Person("张三",18,"男");
let p1 = new Person("李四",18,"男");
let p2 = new Person("王五",18,"男");
console.log(Person.prototype === p.__proto__);
console.log(Person.prototype.constructor === Person);
</script>
</html>
运行结果:
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。
二、原型链
当我们使用一个对象的属性或方法时,会现在自身中寻找,
自身中如果有,则直接使用,
如果没有则去原型对象中寻找,如果原型对象中有,则使用,
如果没有则去原型的原型中寻找,直到找到Object对象的原型。
Object的原型没有原型,如果在Object原型中依然没有找到,则返回undefined。
图解:
三、原型继承
方法:
利用原型及原型链实现继承【面向对象】
代码:
<!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>
</body>
<script>
//利用原型及原型链实现继承【面向对象】
//父构造函数
function Father(name,age,sex){
//指向创建它的实例化对象
this.name = name;
this.age = age;
this.sex = sex;
}
// Father构造函数的原型对象上的公共方法
Father.prototype.money = function(){
//原型对象上的this 指向 调用它的实例对象
console.log(this.name+"-----在挣钱");
}
//子构造函数
function Son(name,age,sex,email){
//使用 call() 立即调用父类方法,并传递参数【继承父类属性】
Father.call(this,name,age,sex);
//子类 自身属性
this.email = email;
}
//通过new将父构造函数的实例对象赋值给son的原型对象
Son.prototype = new Father();
//利用constructor手动改变Son的原型对象的指向的构造函数
Son.prototype.constructor = Son;
//在son的原型对象上添加game方法
Son.prototype.game = function(){
console.log(this.name+"-----在玩游戏");
}
let f = new Father("张三",28,"男");
let s = new Son("张老大",7,"女","13152448308@163.com");
console.log(f,s);
f.money();
s.money();
s.game();
</script>
</html>