原型和原型链 prototype和proto的区别详情

 更新时间:2021年10月29日 11:02:53   作者:丞丞同学  
原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性,每个实例对象下都有__proto__属性,通过属性__proto__指向构造函数的原型对象,当到达末端时,返回null,这样一层一层向顶端查找,就形成了原型链

1、原型

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

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

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

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

2、原型链

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

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

prototype——proto——区别与作用

  • prototype把共有属性预先定义好,给之后对象使用
  • prototype的存在实现了继承,节省内存空间
  • __proto__是对象的,prototype是函数的,因为函数也是对象,所以函数也有__proto__
  • __proto__的作用是就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会沿着它的**__proto__**属性所指向的那个对象(父对象)里找,也就是原型链
  • prototype的作用是就是让该函数所实例化的对象们都可以找到公用的属性和方法

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

2.1 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

2.2 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);

2.3 new()

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

到此这篇关于原型和原型链 prototype和proto的区别详情的文章就介绍到这了,更多相关原型和原型链 prototype和proto的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序实现拖拽 image 触摸事件监听的实例

    微信小程序实现拖拽 image 触摸事件监听的实例

    这篇文章主要介绍了微信小程序实现拖拽 image 触摸事件监听的实例的相关资料,这里提供image触摸并监听的简单实例,需要的朋友可以参考下
    2017-08-08
  • 直观详细的typescript隐式类型转换图文详解

    直观详细的typescript隐式类型转换图文详解

    这篇文章主要为大家介绍了直观详细的typescript隐式类型转换图文详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 可视化埋点元素圈选器实现源码

    可视化埋点元素圈选器实现源码

    这篇文章主要为大家介绍了可视化埋点元素圈选器实现源码示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Canvas如何判断点在形状内及内置API性能详解

    Canvas如何判断点在形状内及内置API性能详解

    这篇文章主要为大家介绍了Canvas如何判断点在形状内及内置API性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JavaScript 反射学习技巧

    JavaScript 反射学习技巧

    这篇文章主要给大家分享的是JavaScript 的反射学习技巧,主要是区别在于所有的函数对象属性过于复杂,而且额外增加可能会导致程序行为不合理,所以扩展 Reflect 函数来专门对函数对象处理调用方法,构造对象,获取或者设置属性等相关操作。下面一起进入文章内容吧
    2021-10-10
  • 微信小程序 获取当前地理位置和经纬度实例代码

    微信小程序 获取当前地理位置和经纬度实例代码

    这篇文章主要介绍了微信小程序 获取当前地理位置和经纬度实例代码的相关资料,这里附有实例代码,及实现效果图,需要的朋友可以参考下
    2016-12-12
  • JS中轻松遍历对象属性的几种方式

    JS中轻松遍历对象属性的几种方式

    这篇文章主要给大家介绍的是JS中轻松遍历对象属性的几种方式,文章从自身可枚举属性、Object.values() 返回属性值、Object.entries()来展开介绍,感兴趣的小伙伴可以参考一下
    2021-09-09
  • Skypack布局前端基建实现过程详解

    Skypack布局前端基建实现过程详解

    这篇文章主要为大家介绍了Skypack布局前端基建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • PHP:微信小程序 微信支付服务端集成实例详解及源码下载

    PHP:微信小程序 微信支付服务端集成实例详解及源码下载

    这篇文章主要介绍了微信小程序 微信支付服务端集成实例详解及源码下载的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序中顶部导航栏的实现代码

    微信小程序中顶部导航栏的实现代码

    这篇文章主要介绍了微信小程序中顶部导航栏的实现代码的相关资料,需要的朋友可以参考下
    2017-03-03

最新评论