对象有属性(专业点叫静态属性)和方法(专业点叫静态方法)和原型属性和原型方法

除了系统自带的那么几百万个对象,我们自己写在js的创建的对象,自定义的对象,都来自对象的构造函数,用来构造对象的函数,叫做构造函数,es6的class也是构造函数,就是一个语法糖而已,还是个残缺的语法糖

// 写一个完整的构造函数
// 构造函数的name一般首字母大写,为了好认
function User(name){
// 静态属性
this.name = name;
// 静态方法
this.say = function(){ ... }
}
// 原型对象
User.prototype = {
//原型属性
prototypeName: "proName",
//原型方法
prototypeSay: function(){ ... }
}
// 构造函数的私有属性
User.aa = "aa"
// 构造函数的私有方法
User.bb= function(){ ... }
class User{
constructor(name) {
//原型属性
this.name = name;
//原型方法
this.say = function(){ ... }
}
//原型方法,没有原型属性
prototypeSay(){ ... },
// 构造函数的私有属性
static aa = "aa"
// 构造函数的私有方法
static bb = function(){ ... }
}

构造函数是为了能够大批量的生产方法属性一样,只有某几个通过传参不同而构造属性不同的对象而诞生的工厂,并且可以通过继承使方法被无限传递或者重写才是构造函数的精髓

原生的继承方式有六种

但最前面的五个各有缺陷,直接上完美方式的代码,寄生组合继承

其他几种自己搜,不混淆

// 父函数SuperType
function SuperType(country) {
this.country = country;
this.sayCountry = function() {
console.log(this.country);
}
}
// 父函数SuperType的原型方法
SuperType.prototype.proSay = function() {
console.log(this.country);
}
// 子函数SuperType
function SubType(country,age) {
SuperType.call(this,country);
this.age = age;
}
// 核心代码,继承
function inheritPrototype(subType,SuperType) {
var prototype = Object(SuperType); // 创建对象
prototype.constructor = subType; // 增强对象
subType.prototype = prototype; // 指定对象
}
// 继承方法执行,参数是(子,父)
inheritPrototype(SubType,SuperType); // 继承完成后
// 子函数添加原型对象
SubType.prototype.sayAge = function() {
console.log(this.age);
}
var a = new SuperType("中国")
var b = new SubType("中华",18)

class语法糖

class SuperType{
constructor(country) {
this.country = country;
this.sayCountry = function(){}
}
proSay(){ },
} class SubType extend SuperType{
constructor(age) {
super();
this.age = age;
}
sayAge(){ },
}
var a = new SuperType("中国")
var b = new SubType("中华",18)

继承的成功就是在于,子函数有父函数的方法,父函数没有子函数的新方法

上面两个写法打印出来如下图,都符合继承的要求

原型链的走向

先上个图,图上没有关于继承的答案,这个图能看一年

分析过程就不说了,需要自己理解,说说几个理论

一个对象的__proto__属性等于对象的构造函数的prototype对象

上面说的这个属性/对象,他的constructor属性又指向构造函数本事

所有function的__proto__都指向Function的prototype,包括Function自己,这是个环

一个面试题

问:

C构造函数继承于构造函数B,B构造函数继承于构造函数A,问C的原型链怎么走到null

答案:

继承者的prototype的prototype的prototype...直到prototype为underfind时说明到了function原型的终点,也就是到了Object层,这时取出__proto__(这个__proto__也就是Object的prototype),再取一层__proto__就是null(尽头)

先有鸡先有蛋

这是个新有函数还是先有对象的问题,函数是对象,对象通过函数new出来,这是个相互嵌套的关系,但是程序肯定是有一个终点的,那到底是先有鸡还是先有蛋

我找到了两个答案

答案一

先有的Object.prototype, Object.prototype构造出Function.prototype,然后Function.prototype构造出Object和Function。

Object.prototype是鸡,Object和Function都是蛋。

答案二

函数function就是对象,所有的函数是被Function这个函数对象构造出来的。Function是最顶层的构造器。它构造了系统中所有的对象,包括用户自定义对象,系统内置对象,甚至包括它自已。这也表明Function具有自举性(自已构造自己的能力)。这也间接决定了Function的call和constructor逻辑相同。每个对象都有一个 constructor 属性,用于指向创建其的函数对象。

我更相信第二个答案

new的原理,模拟一个new

function new(func) {
let target = new Object();
target.__proto__ = func.prototype;
let res = func.call(target);
if (res && typeof(res) == "object" || typeof(res) == "function") {
return res;
}
return target;
}

原型与继承与class的更多相关文章

  1. 深入浅出JavaScript之原型链&继承

    Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instanc ...

  2. JS中原型链继承

    当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...

  3. 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

    上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...

  4. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  5. JavaScript 随笔2 面向对象 原型链 继承

    第六章 面向对象的程序设计 1.创建对象的几种方式 A)工厂模式 function CreatObj(name,sex,age){ this.name=name; this.sex=sex; this ...

  6. 【面试必备】javascript的原型和继承

    原型.闭包.作用域等知识可以说是js中面试必考的东西,通过你理解的深度也就能衡量出你基本功是否扎实.今天来复习一下javascript的原型和继承,虽说是老生常谈的话题,但对于这些知识,自己亲手写一遍 ...

  7. js中的原型、继承的一些想法

    最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享 ...

  8. 深入理解:JavaScript原型与继承

    深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...

  9. javascript的原型和继承(1)

    原型与继承是javascript中基础,重要而相对比较晦涩难解的内容.在图灵的网上看到一篇翻译过的文章,有参考了一些知名博客.我自己总结了几篇.通过这次的总结,感觉自己对原型和继承的认识又增加了很多, ...

  10. js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。

    js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...

随机推荐

  1. 笔记-Python-module

    笔记-Python-module 1.      模块 关于模块: 每个模块都有自己的私有符号表,模块中所有的函数以它为全局符号表.因此,模块的作者可以在模块中使用全局变量,而不用担心与用户的全局变量 ...

  2. 吴裕雄--天生自然PYTHON爬虫:爬取某一大型电商网站的商品数据(效率优化以及代码容错处理)

    这篇博文主要是对我的这篇https://www.cnblogs.com/tszr/p/12198054.html爬虫效率的优化,目的是为了提高爬虫效率. 可以根据出发地同时调用多个CPU,每个CPU运 ...

  3. 使用阿里云服务器配置frp实现Windows系统RDP内网穿透

    1.frp服务器采用阿里云ecs的centos7.5系统,客户端是台windows10的系统,做一个RDP服务的内网穿透用. 2.首先下载frp到服务器(链接:https://github.com/f ...

  4. StringBuffer调整空间

    在无法估算字符串大小情况下,可以使用StringBuffer的trimToSize()方法调整到合适大小.

  5. kafka 高吞吐量的因素

    1.顺序的方式存储数据: 2.批量发送: 3.零拷贝: 来源:咕泡学院

  6. day20-Python运维开发基础(装饰器 / 类中的方法 / 类的方法变属性)

    1. 装饰器 / 类中的方法 / 类的方法变属性 # ### 装饰器 """ 定义:装饰器用于拓展原来函数功能的一种语法,返回新函数替换旧函数 优点:在不更改原函数代码的 ...

  7. SpringBoot之WEB开发-专题二

    SpringBoot之WEB开发-专题二 三.Web开发 3.1.静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资 ...

  8. Linux centosVMware PHP动态扩展模块

    PHP动态扩展模块 /usr/local/php/bin/php -m //查看模块 下面安装一个redis的模块 cd /usr/local/src/ wget https://codeload.g ...

  9. [Pytorch数据集下载] 下载MNIST数据缓慢的方案

    步骤一 首先访问下面的网站,手工下载数据集.http://yann.lecun.com/exdb/mnist/ 把四个压缩包下载到任意文件夹,以便之后使用. 步骤二 把自己电脑上已经下载好的数据集的文 ...

  10. lib文件和dll文件

    一. 简介 1.1 C++两种库文件 lib包含了函数所在的dll文件和文件中函数位置的信息(入口),代码由运行时加载在进程空间中的dll提供,称为动态链接库dynamic link library. ...