原型和原型链 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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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
生成静态页面的PHP类
2006/11/25 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
原生js实现轮播图
2017/02/27 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python获取mp3文件信息的方法
2015/06/15 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
会计毕业自我鉴定
2014/02/05 职场文书
合作协议书模板2014
2014/09/26 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
MySQL系列之三 基础篇
2021/07/02 MySQL