JS 原型与继承2

//***-、原型、原型链、构造函数 prototype、 proto_、constructor

function Foo(){this.a=1} var foo = new Foo();

Object.getPrototypeOf(foo);//访问对象原型 效果等同于,foo. proto ,只是更推荐使用 Es6的 Object.getPrototypeof()方式

// constructor是原型上的一个属性,指向的是构造函数,如果重写了原型,就需要给他定义一个 constructor让它指向构造函数,否则实例的 constructor就会指向object// 重写构造函数原型,需要手动设置 constructor 为当前构造函数 Foo.prototype = {

aa:1,

bb:function(){

console.log(20);

constructor:Foo //很有必要

//***二、继承

//<->、原型链继承 function Super() {

this.a = 11l;

this.b = 1,2,3,4;

Super.prototype.say = function () {

console.log(222);

function Sub({}

Sub.prototype == new Super();//实现:原型链继承

var subl = new sub(); var sub2 = new sub();

//实现的继承结果: subl -- Sub.prototype -- new Super() -- Super.prototype -- Object.prototype

//该方式存在问题(引用值共享问题): subl.b.push(5);

console.log(subl.b);//1,2,3,4,5

console.log(sub2.b) ;// 1,2,3,4,5 sub2的也被修改了

//<二>、构造函数继承 function Super() {

this.a =11l;

this.b = 1,2,3,4;

Super.prototype.say= function (){

console.log(222);}

function Sub(){

Super.call(this);//实现:构造函数继承

var subl = new sub); var sub2 = new sub();

//解决引用值共享问题 subl.b.push(5);

console.log(subl.b);//1,2,3,4,5 console.log(sub2.b) ;// 1,2,3,4

//该方法存在问题(没办法拿到原型上的方法say方法 )

//<三>、组合继承(伪经典继承)

//***伪经典的原因在于,Super()执行了2次 function Super() {

this.a = 111;

this.b = 1,2,3,4;

Super.prototype.say=function(() {

console.log(222);

function Sub(){

Super.call(this);//实现:构造函数继承

Sub.prototype == new Super();//实现:原型链继承

var subl = new Sub(); var sub2 = new sub();

/1 该方式,既能解决引用值共享问题,又能拿到Super.prototype上的其他方法

// 因为,创建实例前,先给Sub指定原型,这时候已经先 newSuper()执行了。此时sub原型上的this.b 就是 1,2,3,4

11 创建实例时,再去 new Sub()时,通过 Super.call(this),就会把前一步构造函数上所有this,b全部覆盖,此时虽然值相同,但是已经是两个不同的引用值了

subl.b.push(5);

console.log(subl.b);//1,2,3,4,5 console.log(sub2.b);//1,2,3,4

//***<四>、寄生组合继承(经典继承) function Super() {

this.a = 11l;

this.b = 1,2,3,4;

Super.prototype.say = function(){

console.log(222);

function Sub(){

Super.call(this);//实现:构造函数继承 ----> 要解决引用值共享功能,所以必须要这样做

//Sub.prototype == new Super();//实现:原型链继承// 要点:通过 object.creat(),绕开new Super()

Sub.prototype =0bject.creat(Super.prototype);//返回一个对象,指定当前赋值对象的原型为传入的参数 //实现:原型链继承

/ 注意:Object.creat(),是Ess的方法,ES3不支持,会有兼容性问题,需要些兼容性方案

***Object.creat 的兼容性方案 if(!Object.creat) {

Object.creat = function(proto) {

function F() {};

F.prototype = proto; return new f();

var subl = new sub(); var sub2 = new sub();

subl.b.push(5);

console.log(subl.b);//1,2,3,4,5 console.log(sub2.b) ;// 1,2,3,4

// 寄生组合继承,依然存在的问题:

/ Sub.prototype-Object.creat(Super.prototype);此时重写了sub的原型,如果在这句执行之前,往sun原型中添加了其他原型方法,就会被覆盖导致不可用而报错

//***<五>、圣杯模式继承:

//***<六>、extends 关键字,直接实现继承(ES6解决方案): class Super() {}

class Sub() extends Super {}

//<七>、拷贝继承

相关推荐
漂流瓶jz12 分钟前
Webpack如何实现万物皆可import?loader的使用/配置/手写实践
前端·javascript·webpack
ZC跨境爬虫28 分钟前
跟着 MDN 学CSS day_41:显式轨道、隐式网格与区域命名放置
前端·javascript·css·ui·交互
修己xj1 小时前
告别手动存图!这款叫 Fatkun 的浏览器插件,简直是素材收集神器
前端
袋鼠云数栈2 小时前
从前端到基础设施,ACOS 如何打通企业全链路可观测
运维·前端·人工智能·数据治理·数据智能
AskHarries2 小时前
系统提示词、开发者指令和用户输入的优先级
java·前端·数据库
Moment2 小时前
长上下文会最终杀死 Rag 吗?
前端·javascript·后端
qcx233 小时前
【系统学AI】25 论文导读 ①:两篇改变 AI 的开山之作——Attention Is All You Need & ReAct
前端·人工智能·react.js·transformer
kyriewen4 小时前
大文件上传最全指南:分片、断点续传、秒传,一篇就够了
前端·javascript·面试
我叫黑大帅4 小时前
解决聊天页内部滚轮改为页面滚动问题
javascript·后端·面试
郑洁文5 小时前
基于Python的Web命令执行漏洞自动化检测系统
前端·python·网络安全·自动化