前 言
在JavaScript中,我们可以通过操作原型来模拟继承。
学习继承之前,我们需要先要了解以下JavaScript中的原型对象。
1. __prto__ 和 prototype 的区别
对 象具有 _proto_
属性,可称为 “隐式原型” 。一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。
方 法这个特殊的对象,除了拥有上述的 _proto_
属性,prototype
属性为方法独有。
当我们创建实例化对象时,对象中的 _proto_
属性则默认指向函数 prototype
属性。
function Person(name){
this.name = name;
this.sayName = function(){
console.log(`我叫${
this.name}`)
}
}
var person1 = new Person();//实例化Person构造方法
var person2 = new Person();
t.__proto__ === test.prototype;// true
代码运行机制:
- 创建一个自定义的构造函数后,它的原型对象默认只会有 contructor属性,其他属性和方法都是从Object继承而来的.
constructor属性返回对创建此对象的函数体。
- 当调用构造函数创建一个新实例后,该实例的内部将包含一个指针,指向构造函数的原型对象。ECMA5中称这个指针叫 [[prototype]]。虽然在脚本中没有标准的访问 [[prototype]] 方式,但Firefox、Safari和Chrome中,属性__proto__是对访问 [[prototype]] 的实现。而在IE浏览器中,这个属性则是完全不可见的。不过要明确的真正一点就是,这个连接存在于实例对象和构造函数的原型对象(即构造方法名.prototype)之间,而不是存在于实例和构造函数之间。
继承
// 定义一个Person类
function Person(name, age) {
this.name = name;
this.age = age;
//定义一个info函数
this.info = function() {
document.writeln("年龄" + this.age + "姓名" + this.name);
}
}
//创建Person类的实例对象
var p1 = new Person('xiaoming', 20);
//调用p1的info方法
p1.info();
//为Person类增加walk方法
Person.prototype.walk = function() {
document.writeln(this.name + '正在走<br/>');
}
var p2 = new Person('xiaohong', 20);
//p2可以调用Person中的方法
p2.info();
//也可以调用prototype属性增加的方法
p2.walk();
//JS允许为类动态增加方法和属性,这里p1也可以调用walk
p1.walk();
在对象原型上添加的属性或者方法,实例出来的构造方法对象都可以访问到它原型上的东西。从而就实现了“子继父业”。
参考
CSDN:[[https://blog.csdn.net/q5706503/article/details/82947977]]