酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源资讯

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

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

来源:互联网 作者:秩名 人气: 发布时间:2021-10-31
本篇文章主要介绍了原型和原型链prototype和proto的区别介绍,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

1、原型

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

prototype是函数下的属性,对象想要查看原型使用隐式属性__Proto__

constructor指向构造函数

自己身上有属性,原型上也有属性,取近的,用自己的

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

1

2

3

4

5

6

7

8

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的指向是谁

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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传一个参数数组

1

2

3

4

5

6

7

8

9

10

11

12

13

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

1

2

3

4

5

var obj = {}//创建空对象

obj.__proto__ = Person.prototype;//继承作用域

Person.call(obj,)//改变this指向

//这三步是隐式的

var person = new Person();//new操作

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。

您可能感兴趣的文章:

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

相关文章

  • 使用react-color实现前端取色器的教程

    使用react-color实现前端取色器的教程

    我们可以通过react-color实现前端界面的取色器,效果如下图所示: 安装 npm i react-color -S 使用 import React, { Component, Fragment, createRef } from react; import { Popover } from antd; import {......
    11-12
  • React手写tab切换的介绍

    React手写tab切换的介绍

    父文件 import React, { useState } from react; // import Module1 from ./Module1; // import Module2 from ./Module2; // import Module3 from ./Module3; // import Module4 from ./Module4; import HeaderTtabs, { tagType } from......
    11-12
  • react路由Link配置的介绍

    react路由Link配置的介绍

    1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:/xx,search:?键值对,hash:#xxx,state:{键值对}}会自动将pathname、search、hash拼接在url路径上,state为传入的参数 可通......
    11-10
  • JavaScript实现橱窗展示的介绍

    JavaScript实现橱窗展示的介绍

    先搭架子: * { margin: 0; padding: 0; } .box { width: 800px; height: 190px; border: 1px solid #000; margin: 100px auto; } ul { list-style: none; display: flex; } ul img { vertical-align: top; } .progress { width: 100......
    11-08
  • 原型和原型链prototype和proto的区别介绍

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

    1、原型 原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性 prototype是函数下的属性,对象想要查看......
    10-31
  • Echats图表大屏自适应的实现方法介绍

    Echats图表大屏自适应的实现方法介绍

    使用图表结合数据可以很直观的视觉效应,大屏展示已经成为企业数据展示的常见场景,如何做到大屏自适应是我们需要解决的一个问题,下面是其中一种解决方案,利用......
    10-25
  • Vue生命周期介绍和钩子函数介绍

    Vue生命周期介绍和钩子函数介绍

    Vue生命周期介绍和钩子函数 组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段。从Vue实例被创建开始到该实例......
    10-25
  • 基于angular实现树形二级表格

    基于angular实现树形二级表格

    先看效果: 代码: 1、html div class=userContent_content div table tr td节点名称/td td节点管理IP/td td节点登录名/td td节点登录密码/td /tr //使用ng-container作为空标签用于辅助放置for或......
    10-16
  • react之组件通信介绍

    react之组件通信介绍

    父组件与子组件通信 父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变 父组件利用ref对子组......
    10-15
  • JavaScript中5个常用的对象的介绍

    JavaScript中5个常用的对象的介绍

    前言: 相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会......
    10-11