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


Posted in Javascript onNovember 02, 2021

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的区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
Angular 数据请求的实现方法
May 07 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
WebWorker 封装 JavaScript 沙箱详情
quickjs 封装 JavaScript 沙箱详情
Nov 02 #Javascript
js 数组 fill() 填充方法
浅谈 JavaScript 沙箱Sandbox
详解 TypeScript 枚举类型
Nov 02 #Javascript
前端JavaScript大管家 package.json
You might like
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python多线程并发实例及其优化
2019/06/27 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
html5 标签
2009/07/16 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
程序员岗位职责
2013/11/11 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
师范生求职信
2014/06/14 职场文书
党代会心得体会
2014/09/04 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书