原型和原型链prototype和proto的区别介绍_F11 - 专业站长和开发者的学习网站

分享到

原型和原型链prototype和proto的区别介绍

JavaScript 来源：互联网作者：秩名发布时间：2021-10-31 08:09:18 人浏览

摘要

1、原型原型是function对象下的属性，它定义了构造函数的共同祖先，也就是一个父子级的关系，子对象会继承父对象的方法和属性 prototype是函数下的属性，对象想要查看原型使用隐式

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操作

您可能感兴趣的文章 :

Javascript的原型和原型链你了解吗

原文链接 : https://blog.51cto.com/u_15313627/3195176

Tag :

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。