原型

原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性

  1. prototype是函数下的属性,对象想要查看原型使用隐式属性__Proto__
  2. constructor指向构造函数
  3. 自己身上有属性,原型上也有属性,取近的,用自己的

通过给原型添加属性,可以让所有的实例化对象共享属性和方法

Car.prototype = {
height : 1400,
lang : 4900,
carName : 'BMW'
}
function Car() {
}
var car = new Car();

原型链

每个实例对象下都有__proto__属性,通过属性__proto__指向构造函数的原型对象,当到达末端时,返回null,这样一层一层向顶端查找,就形成了原型链

prototype是函数特有的,__proto__是对象有的,js中万物皆对象

prototype和——proto——区别与作用

prototype把共有属性预先定义好,给之后对象使用

prototype的存在实现了继承,节省内存空间

__proto__是对象的,prototype是函数的,因为函数也是对象,所以函数也有__proto__

__proto__的作用是就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会沿着它的**__proto__**属性所指向的那个对象(父对象)里找,也就是原型链

prototype的作用是就是让该函数所实例化的对象们都可以找到公用的属性和方法

__proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype

constructor构造函数

constructor属性存在于__proto__prototype,它指向构造函数本身

一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。

问题 修改了函数的原型对象,constructor的指向是谁

 function Star(uname, age) {
this.uname = uname;
this.age = age;
}
// 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
Star.prototype = {
// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
constructor: Star, // 手动设置指回原来的构造函数
sing: function() {
console.log('我会唱歌');
},
movie: function() {
console.log('我会演电影');
}
}
var zxy = new Star('张学友', 19);
console.log(zxy)

在修改函数原型时,因为Star.prototype就是一个对象,所以constructor指向构造这个对象的原型,也就是object

call/apply

通过call``apply可以改变this的指向,借用别人的函数完成自己的功能

区别:call传多个参数 apply传一个参数数组

function Person(name,age,sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
function Student(name,age,sex,tel,grade) {
//var this = {name: "lin", age: "19", sex: "male", tel: 123, grade: 78}
Person.call(this,name,age,sex);//通过call改变this的指向这个函数
//Person.apply(this,[name,age,sex])
this.tel = tel;
this.grade = grade;
}
var student = new Student('lin','19','male',123,78);

new()

  1. 创建一个空对象
  2. 构造函数的this,继承函数原型
  3. 让this指向构造函数的对象实例,执行构造函数内容为新对象添加属性和方法
  4. 返回this
var obj = {}//创建空对象
obj.__proto__ = Person.prototype;//继承作用域
Person.call(obj,)//改变this指向
//这三步是隐式的
var person = new Person();//new操作

原型和原型链 prototype和proto的区别的更多相关文章

  1. JS原型、原型链深入理解

    原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性. 一.初识原 ...

  2. 如何理解JavaScript的原型和原型链

    在现在的业务开发中,应该很少人在写原生JavaScript了,大家都一股脑地扑在各个框架上.本来,这些框架对于业务和开发者来说是一种福音,减少了各种各样的开发痛点,但是带来的负面问题就是对于开发者来说 ...

  3. 十分钟读懂JavaScript原型和原型链

    原型(prototype)这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型.在JavaScript中,原型的探索也有很多有趣的地方,接下来跟随我的脚步去看看吧. 原型对象释义 每一个构 ...

  4. 一张图理解prototype、proto和constructor的三角关系

    × 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则 ...

  5. 理解prototype、proto和constructor的三角关系

    javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则是prototype.proto和constructor的三角关系 ...

  6. [转] 一张图理解prototype、proto和constructor的三角关系

    前面的话 javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则是prototype.proto和constructor ...

  7. JS 一张图理解prototype、proto和constructor的关系

    转载于原文地址:https://www.cnblogs.com/xiaohuochai/p/5721552.html(感谢大神的总结) 前面的话 javascript里的关系又多又乱.作用域链是一种单 ...

  8. 你不知道的JavaScript--Item15 prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

  9. JavaScript prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

随机推荐

  1. VirtualBox CentOS8 调整分辨率

    1 概述 VirtualBox安装完CentOS8后无法调节分辨率,需要安装额外的工具. 2 安装依赖包 首先确保虚拟机能正常连接网络,然后安装:kernel.kernel-core.kernel-m ...

  2. Go-26-Json

    JSON(JavaScript Object Notation,JavaScript对象表示法)是一种轻量级的数据交换格式,因简单.可读性强被广泛使用. Go的标准包encoding/json对JSO ...

  3. 计算eks node 中pod数量

    计算eks node 中pod数量 计算公式:((IP数I - 1) * ENI数) + 2 实例规格等ENI数和IP的对应关系,请参考 https://docs.aws.amazon.com/zh_ ...

  4. 2020北航OO第四单元总结

    2020北航OO第四单元总结 一.本单元架构设计 本单元作业是实现一个UML图解析器,其中实现接口及主要框架课程组已经提供,只需要我们完成特定功能. 在第一次作业时,感到十分迷茫,不知道如何下手,最后 ...

  5. CPF 入门教程 - 属性和事件(七)

    CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...

  6. springboot 配置将info、error、debug 分别输出到不同文件

    在resource下创建名为 logback-spring.xml 的配置文件,内容如下: <?xml version="1.0" encoding="UTF-8& ...

  7. hdu2899 三分

    题意:      给你个函数,F(x) = 6 * x^7+8*x^6+7*x^3+5*x^2-y*x ,给你一个y,x的范围是0--100 问你最小的 F(x) 思路:       本人推数学公式啥 ...

  8. Msfvenonm生成一个后门木马

    在前一篇文章中我讲了什么是Meterpreter,并且讲解了Meterpreter的用法.传送门-->Metasploit之Meterpreter 今天我要讲的是我们用Msfvenom制作一个木 ...

  9. hdu5108枚举因子求最小的m

    题意:      给一个n(<=10Y),然后让找到一个最小的m使得n/m是一个素数. 思路:       先用sqrt(n)的时间把所有的因子都求出来,然后在排序,枚举,就行了,这个题目这么做 ...

  10. 绕过CDN查找网站真实ip

    在渗透测试过程中,经常会碰到网站有CDN的情况.CDN即内容分发网络,主要解决因传输距离和不同运营商节点造成的网络速度性能低下的问题.说的简单点,就是一组在不同运营商之间的对接点上的高速缓存服务器,把 ...