javascript面向对象精要学习总结（第五章继承）

原型对象继承

原理：原型对象的属性可以经由对象实例访问
下面的例子，所含【对象继承】和【构造函数继承】，用于理解【原型属性经由对象实例访问】

//对象继承
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属性仍将是Teacherthis.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);

javascript面向对象精要学习总结（第五章继承）相关推荐

javascript面向对象精要学习总结（第二章函数）
函数也是对象,但一点不同函数存在一个 call 的内部属性,表明函数可执行 typeof 对任何具有call属性的对象,都返回"function" function fun(){ ...
javascript面向对象精要学习总结（第一章类型）
原始类型共5种 string | number | boolean | undefined | null 内建引用类型共5种 Date | Error | Function | Object | Re ...
《JavaScript面向对象精要》——第1章原始类型和引用类型1.1　什么是类型
本节书摘来自异步社区<JavaScript面向对象精要>一书中的第1章,第1.1节,作者:[美]Nicholas C. Zakas 译者: 胡世杰更多章节内容可以访问云栖社区" ...
《JavaScript面向对象精要》——第1章原始类型和引用类型 1.1　什么是类型
本节书摘来自异步社区<JavaScript面向对象精要>一书中的第1章,第1.1节,作者:[美]Nicholas C. Zakas著,更多章节内容可以访问云栖社区"异步社区&qu ...
javascript面向对象精要学习总结（第六章对象模式）待更新
单对象的模块模式定义单个对象,以自执行函数函数的方式用闭包的方式,产生只通过特定方法访问的数据 var student = function(){var name = "gs" ...
javascript面向对象精要学习总结（第三章对象）
属性添加原理一个对象首次添加某一属性时,是调用对象内部的put方法一个对象修改某一属性是,是调用对象内部的set方法属性是否存在使用 in 方法时,会检测[自有属性]+[原型属性] 使用 ha ...
javascript面向对象精要学习总结（第四章构造函数和原型对象）
constructor 实例的构造函数属性它是实例的构造函数属性,指向创建它的构造函数不要用它来检测对象的类型,因为它可以被覆盖,并不准确检测对象类型最好使用 instanceof functi ...
《JavaScript面向对象精要》读书笔记
JavaScript(ES5)的面向对象精要标签: JavaScript 面向对象读书笔记 2016年1月16日-17日两天看完了<JavaScript面向对象精要>(参加异步社区的活 ...
《JavaScript面向对象精要》——1.8　原始封装类型
本节书摘来自异步社区<JavaScript面向对象精要>一书中的第1章,第1.8节,作者:[美]Nicholas C. Zakas 译者: 胡世杰更多章节内容可以访问云栖社区" ...

javascript面向对象精要学习总结（第五章继承）

原型对象继承

Object是顶层对象

最好不要去修改 Object.prototype

最简单的一个对象继承

实现一个基本的对象继承

实现一个稍复杂的构造函数继承

实现一个伪类继承（构造函数窃取）

父类方法被子类覆盖，如何仍然可以调用？

创建一个没有原型对象的对象

javascript面向对象精要学习总结（第五章继承）相关推荐

最新文章

热门文章

javascript面向对象精要学习总结（第五章 继承）

原型对象继承

Object是顶层对象

最好不要去修改 Object.prototype

最简单的一个对象继承

实现一个基本的对象继承

实现一个稍复杂的构造函数继承

实现一个伪类继承（构造函数窃取）

父类方法被子类覆盖，如何仍然可以调用？

创建一个没有原型对象的对象

javascript面向对象精要学习总结（第五章 继承）相关推荐

最新文章

热门文章

javascript面向对象精要学习总结（第五章继承）

javascript面向对象精要学习总结（第五章继承）相关推荐