话不多说先来段代码

class Parent {
private name:string;
constructor(name) {
this.name = name;
} public getName():string {
return this.name;
} public setName(name:string):void {
this.name = name;
} sayHi() {
return `Parent name is ${this.name}`;
}
} class Child extends Parent {
constructor(name) {
super(name);
} sayHi() {
return `Child call Parent' sayHi() to show parent name is ${super.getName()}`;
}
} const xiaoxu = new Child('xiaoxu');
console.log(xiaoxu.sayHi());
var __extends = (this && this.__extends) || (function() {
var extendStatics = Object.setPrototypeOf || ({
__proto__: []
} instanceof Array && function(d, b) {
d.__proto__ = b;
}
) || function(d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
}
;
return function(d, b) {
extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype,
new __());
}
;
}
)();
var Parent = /** @class */
(function() {
function Parent(name) {
this.name = name;
}
Parent.prototype.getName = function() {
return this.name;
}
;
Parent.prototype.setName = function(name) {
this.name = name;
}
;
Parent.prototype.sayHi = function() {
return "Parent name is " + this.name;
}
;
return Parent;
}());
var Child = /** @class */
(function(_super) {
__extends(Child, _super);
function Child(name) {
return _super.call(this, name) || this;
}
Child.prototype.sayHi = function() {
return "Child call Parent' sayHi() to show parent name is " + _super.prototype.getName.call(this);
}
;
return Child;
}(Parent));
var xiaoxu = new Child('xiaoxu');
console.log(xiaoxu.sayHi());
var __extends = this && this.__extends;
var extendsFn = function() {
var extenStatics = Object.setPrototypeOf; }
__extends = __extends || // 这句其实比较有意思
{__proto__: []} instanceof Array && function ss(){} // 首先我们知道如果var a = new A(), 那么a.__proto__ = A.prototype 而A.prototype.__proto__ = Object.prototype
//所以假设var a = {__proto__: []},那么也就意味着a.__proto__ = []
// 再说下instanceof,我们先写一个伪instanceof
// 所以[].__proto__ = Array.prototype 当然所以可以理解为a是[]的子类,是Array的子子类。
// 其实这段话的意思就是来判断当前环境是否支持__proto__作为隐式链接来进行原型链查找,其实是一种环境检测的方法,非常赞。 // 这样d.__proto = b,使得d可以引用b上的属性,即静态变量 // A instanceof B === fakeInstanceof(A, B)
function fakseInstanceof(a, b) {
var L = a.__proto__
var M = b.prototype
if(L === M) {
return true;
} else {
return false;
}
} // 更帅的一段来了
function __() {
this.constructor = d;
} d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, d = new __()) // 傻眼了吧,这里__就是一个桥梁,因为d = new __()所以d.__proto__ = __.prototype, 又因为__.prototype = b.prototype,
// 这样我们就可以在d和b之间形成原型链,且将隔离性做到很好
// 别忘记d = new __()会改变constructor,这里我们用this.constructor很好的结局了。
// ??这里是否有效率提升,参考anujs的解释。

从Typescript看原型链的更多相关文章

  1. 简单粗暴地理解js原型链--js面向对象编程

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  2. 简单粗暴地理解 JavaScript 原型链 (一个充满歪门邪理的理解方法,有助于新手哦!)

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  3. 好文要顶之 --- 简单粗暴地理解 JavaScript 原型链

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  4. JS 原型链学习总结

    废话篇: 在js的学习过程中有一大难点就是原型链.学习的时候一直对这一内容不是十分的明白.纠结的我简直难受.,幸好总算给他弄通了,哇咔咔,总算可以不用在睡梦中还想着他了. 正文篇: 要了解原型链我们首 ...

  5. 谈谈我对 js原型链的理解

    想要学习 “原型链” 必须要认识什么是 “原型” 和 “原型链” 先理解一下普通的继承和原型的区别,下面写一段js代码来帮助理解: var Animal = function(){ // 动物抽象类 ...

  6. js 原型链和继承(转)

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...

  7. 转自知乎大神---什么是 JS 原型链?

    我们知道 JS 有对象,比如 var obj = { name: 'obj' } 我们可以对 obj 进行一些操作,包括 「读」属性 「新增」属性 「更新」属性 「删除」属性 下面我们主要来看一下「读 ...

  8. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  9. 【nodejs原理&源码赏析(3)】欣赏手术级的原型链加工艺术

    目录 一. 概述 二. 原型链基础知识 三. Worker类的原型链加工 四. 实例的生成 五. 最后一个问题 六. 一些心得 示例代码托管在:http://www.github.com/dashno ...

随机推荐

  1. LVM XFS增加硬盘分区容量最后一步的时候动态扩容报错

    在我们lvextend扩容完之后,想动态扩容时出现错误.我们可以用以下命令来进行操作. 若不是xfs我们可以用resize2fs,这里报错了 [root@Mysql01-213-66 ~]# resi ...

  2. C# 自制报表组件 EzReportBuild 2.5

    就写到这里,不玩这个了,game over. 2.0版本添加了多报表页嵌套功能,每份报表可设置多页,每页可设置不同的纸张大小.数据表.页面规则等,并可对报表页次序即时调整,同时,优化了显示,报表显示更 ...

  3. hashCode 与 equals

    面试官可能会问你:“你重写过 hashcode 和 equals 么,为什么重写equals时必须重写hashCode方法?”   hashCode()介绍 hashCode() 的作用是获取哈希码, ...

  4. 返回 字符串的 form和js组合让页面跳转

    router.get("/wy/jhy").handler(ctx->{ ctx.request().response().setChunked(true); System. ...

  5. java web项目由http转换成https遇到的各种坑

    java web项目由http转换成https遇到的各种坑 这篇文章写给自己在经历项目由http转换成https遇到的各种坑所做的一份笔记,留给以后自己看,或者和开发的朋友也刚好遇到和我一样的问题的朋 ...

  6. CentOS7+CDH5.14.0安装CDH错误排查:该主机与 Cloudera Manager Server 失去联系的时间过长。 该主机未与 Host Monitor 建立联系

    主机错误: 该主机与 Cloudera Manager Server 失去联系的时间过长. 该主机未与 Host Monitor 建立联系 解决办法: 首先查看该主机NTP服务是否启动:https:/ ...

  7. 解决layui table方法渲染时时间格式问题

    在显示时间时没有成功 ,{field:'showTime',title:'要显示的时间'} 崎岖过程就不详述了,直接上干货 @官网相关文档1.@官网相关文档2.@参考文章1.@参考文章2 浏览了很多资 ...

  8. 不常用但是很实用的css记录

    本文主旨是记录一些不常用但是非常炫酷的css属性,提升用户体验的捷径之一. 1.background-attachment  滚动视差    https://codepen.io/Chokcoco/p ...

  9. 通过ssh StrictHostKeyChecking解决自动化git项目问题

    SSH 公钥检查是一个重要的安全机制,可以防范中间人劫持等黑客攻击.但是在特定情况下,严格的 SSH 公钥检查会破坏一些依赖 SSH 协议的自动化任务,就需要一种手段能够绕过 SSH 的公钥检查. 首 ...

  10. jq 字符串去除空格

    1.去除首尾空格: var txt = $('#Txt').val().trim(); txt = txt.replace(/(^\s*)|(\s*$)/g, ""); 2.去除所 ...