原型对象继承
- ==原理：原型对象的属性可以经由对象实例访问==
- 下面的例子，所含【对象继承】和【构造函数继承】，用于理解【原型属性经由对象实例访问】
//对象继承
var person = {
name:"gs",
age:19
}
console.log(person.prototype === undefined );
function Student(){}
Student.prototype = person;//原型属性经由对象实例访问
console.log(new Student());
//构造函数继承
function Person(){
this.name = "gs";
this.age = 19;
}
function Student(){
this.name = "zk"
}
Student.prototype = new Person();//原型属性经由对象实例访问
var zk = new Student();
console.log(zk);
Object是顶层对象
- 所有对象都继承自 Object.prototype，除非显示指定
- 以对象字面量定义的对象，其 prototype 的值都被设为 Object.prototype
定义在 Object.prototype 上的方法
- hasOwnProperty
- propertyIsEnumerable
- isPrototypeOf
- valueOf | 返回对象的值表达
- toString | 返回对象的字符串表达
valueOf
- 每当一个操作符被用于一个对象时（自动）调用
toString
- 在进行运算时，有可能发生类型转换
let obj = { name:"gs" };
console.log(obj+111)//;[object Object]111
console.log(obj.toString());//[object Object]
console.log(obj.valueOf());//{ "name": "gs" }
最好不要去修改 Object.prototype
最简单的一个对象继承
- 声明一个字面量对象，相当于自动继承自 Object
- 声明字面量对象，可以用 Object.create 方法替代，它的继承作用更加明显
- ==注意：Object.prototype 实际上值是 null==
var student1 = {
name:"gs"
}
var student2 = Object.create(Object.prototype,{
name:{
configurable:true,
enumerable:true,
value:"gs",
writable:true,
}
})
实现一个基本的对象继承
//对象继承
var person = {
name:"gs",
age:19
}
console.log(person.prototype === undefined );
function Student(){}
Student.prototype = person;//原型属性经由对象实例访问
console.log(new Student());
实现一个稍复杂的构造函数继承
- 因为js中的继承是通过原型对象链来实现的，因此没有调用对象父类的构造函数
- 所以，要注意！最好重写构造器属性，否则将被设为父类的值
function Person(school,name,age){
this.school = "beijing univercity";
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
Person.prototype.sayAge = function(){
console.log(this.age);
}
function Student(name,age){
this.name = name;
this.age = age;
}
Student.prototype = new Person();
var gs = new Student("gs",19);
console.log(gs.constructor);//Person
Student.prototype.constructor = Student;//注意！要重写构造器属性，否则将被设为父类的值
console.log(gs.constructor);//Student
Student.prototype.sayName = function(){
console.log("student is "+this.name);
}
console.log(gs.sayName());
console.log(gs.sayAge());
实现一个伪类继承（构造函数窃取）
- 实际上就是使用 call 的方式，将父类的属性“拷贝”到子类中，同时还包括了constructor属性
- 仍然需要用prototype方式继承方法，同时还要设置constructor
function Person(school,name,age){
this.school = "beijing univercity";
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
Person.prototype.sayAge = function(){
console.log(this.age);
}
function Teacher(school){
Person.call(this,...arguments);//因为this指向Teacher，所以constructor属性仍将是Teacher
this.school = school;//注意，新的属性，应置于继承发生之后，以做覆盖
}
var zk = new Teacher("haver","zk",23);
console.log(zk.constructor);//constructor属性正确，为Teacher
console.log(zk.sayName === undefined);//true，但是，没有继承原型方法和属性
Teacher.prototype = new Person();
var zk_2 = new Teacher("haver","zk_2",23);//没有继承原型方法
console.log(zk_2.sayName());//拿到方法了
console.log(zk_2.constructor);//Person。不是吧，constructor属性又不对了
Teacher.prototype.constructor = Teacher;
console.log(zk_2.constructor);//Teacher。使用call方式继承属性，仍然需要用prototype方式继承方法，同时还要设置constructor
父类方法被子类覆盖，如何仍然可以调用？
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log("father method " + this.name);
}
Person.prototype.sayAge = function(){
console.log(this.age);
}
function Student(){
Person.call(this,...arguments);
}
Student.prototype = Object.create(Person.prototype,{
constructor:{
configurable:true,
enumerable:true,
value:Student,
writable:true,
}
})
Student.prototype.sayName = function(){
console.log("child method");
}
Student.prototype.sayName_1 = function(){
Person.prototype.sayName.call(this);//这是唯一的访问父类的方法
}
var gs = new Student("gs",20);
console.log(gs);
console.log(gs.sayName_1());
创建一个没有原型对象的对象
- 它不会发生和继承来的属性名相冲突的问题，所以它是一个完美的【哈希容器】
- 哈希容器也可以理解为是一种映射容器，采用哈希算法（映射算法，散列算法），将不定长的数据压缩成定长的数据，这串定长值我们称为 哈希值
var obj = Object.create(null);
console.log(obj.prototype === undefined);
console.log( valueOf in obj);
console.log( toString in obj);
网友评论