JavaScript原型与实例详解

目录
  • 构造函数 实例 原型三者的关系
  • prototype属性
  • 属性或成员的搜索原则
  • 总结

构造函数 实例 原型三者的关系

1.任何函数都有一个prototype属性,该属性是一个对象

function F () {}
console.log(F.prototype) // => object
//原型对象
F.prototype.sayHi = function () {
  console.log('hi!')
}

2.构造函数的prototype对象默认都有一个constructor属性,指向prototype对象所在函数

console.log(F.constructor === F) // => true
//表示这个

3.通过构造函数得到的实例对象内部会包含一个指向构造函数的prototype对象的指针_proto_

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true

意思是用当前构造函数创建的实例对象内部都包含一个指针,这个指针就是_proto_,然后这个指针是指向构造函数的prototype对象的

因此我们可以直接用实例访问原型对象上的成员

例:

instance.sayHi() // => 打印hi!

注意

_proto_是一个非标准属性

prototype属性

Javascript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。
这个对象的所有属性和方法，都会被构造函数的实例继承。

这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在prototype对象上。

例子:

function Person (name, age) {
  this.name = name
  this.age = age
}
console.log(Person.prototype)//打印原型
Person.prototype.type = 'human'//将human挂载到原型对象的属性上
Person.prototype.sayName = function () {//还可以定义函数
  console.log(this.name)
}
let p1 = new Person(...)
let p2 = new Person(...)
console.log(p1.sayName === p2.sayName) // => true

我们可以看到console.log(p1.sayName === p2.sayName)这行代码打印的结果是true

这是因为所有实例的type属性和sayName()方法都是一个同一个内存地址,都是指向prototype对象,因此提高了运行效率

属性或成员的搜索原则

我们知道了多个实例对象是可以共享原型对象中的属性或成员的,那么js中是怎么实现这个共享机制的呢?

这就不得不提到属性的搜索原则了

每当代码读取某个实例对象的某个属性时,都会执行一次搜索,搜索目标是具有给定名字的属性或者成员

搜索过程如下:

1.首先从对象实例本身开始搜索

2.如果在实例对象中找到了具有给定名字的属性,则返回该属性的值

3.如果没有找到,则继续搜索实例对象中含有的指针(上文中讲过)指向的原型对象,在原型对象中查找具有给定名字的属性

4.如果在原型对象中找到了这个属性,则返回该属性的值

在执行instance.sayName()时,会执行两次搜索,第一次搜索实例对象,第二次搜索原型对象

总结

以上就是多个实例对象共享原型所挂载的属性和方法的基本原理!

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • javascript 对象 与 prototype 原型用法实例分析

    本文实例讲述了javascript 对象 与 prototype 原型用法.分享给大家供大家参考,具体如下: 我们做程序开发的,经常面对的就是一个一个对象.那么在javascript中我们怎么去创建一个类以及一个对象呢? <script type="text/javascript"> //创建一个Test对象 function Test(){ } var test = new Test(); //创建一个对象 var obj = new Object(); //json 对

  • 详解一个小实例理解js原型和继承

    详解一个小实例理解js原型和继承

    导语1:一个构造函数的原型对象,其实就是这个构造函数的一个属性而已,属性名叫prototype,值是一个对象,对象中有一些属性和方法,所以每个构造函数的实例对象都拥有这些属性和方法的使用权. 导语2:构造函数需要用 new 操作符来调用,它本身没有任何意义,只有实例化后才有生命,当然你也可以把它当普通函数使用,那this就是指向window了(意义不大). 导语3:对于构造函数实例化出一个对象经历了什么? 我们看下面这个例子: 这个例子充分说明了,大佬们创造出构造函数这种东西,是有特殊用处的,本

  • JS原型对象操作实例分析

    本文实例讲述了JS原型对象操作.分享给大家供大家参考,具体如下: 万物皆对象,函数也同样是对象,是特殊的函数对象 function fn() {} let a = new fn(); let b = new Function() console.log(typeof a); // object console.log(typeof b); // function 打开浏览器,输入fn,会发现fn有一个prototype(原型)属性,这个属性是一个指针,指向原型对象,这个对象包括了特定类型所有共享

  • 一文秒懂JavaScript构造函数、实例、原型对象以及原型链

    1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. // 利用构造函数创建对象 function Person(uname, age) { this.uname = uname; this.age

  • JavaScript原型链与继承操作实例总结

    JavaScript原型链与继承操作实例总结

    本文实例讲述了JavaScript原型链与继承操作.分享给大家供大家参考,具体如下: 1. JavaScript继承 JavaScript继承可以说是发生在对象与对象之间,而原型链则是实现继承的主要方法: 1.1 原型链 利用原型让一引用类型继承另一个引用类型的属性和方法. 构造函数中有个prototype(每个函数中都有),指向他的原型对象,每个原型对象中也有一个constructor属性,指向原构造函数.通过构造函数创建的新对象中都有一个无法直接访问的[[proto]]属性,使得对象也指向构

  • JavaScript原型与实例详解

    目录 构造函数 实例 原型三者的关系 prototype属性 属性或成员的搜索原则 总结 构造函数 实例 原型三者的关系 1.任何函数都有一个prototype属性,该属性是一个对象 function F () {} console.log(F.prototype) // => object //原型对象 F.prototype.sayHi = function () { console.log('hi!') } 2.构造函数的prototype对象默认都有一个constructor属性,指向p

  • JavaScript hasOwnProperty() 函数实例详解

    hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. IE 5.5+.FireFox.Chrome.Safari.Opera等主流浏览器均支持该函数. 语法 object.hasOwnProperty( propertyName ) 参数 参数 描述 propertyName Str

  • JavaScript数组方法实例详解

    JavaScript数组方法实例详解

    目录 简介 创建数组 创建方法 详解 方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill()  (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和

  • javascript继承机制实例详解

    本文实例讲述了javascript继承机制.分享给大家供大家参考.具体分析如下: 初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解

  • JavaScript私有变量实例详解

    本文实例讲述了JavaScript私有变量.分享给大家供大家参考,具体如下: 任何在函数中定义的变量,就是私有变量,因为这些变量在函数外部是无法访问到的.总的来说,私有变量包括函数的参数.局部变量和在函数内部定义的其他函数. function add(num1, num2){ var sum = num1 + num2; return sum; } 上面的例子中的 num1, num2, sum 就是函数的私有变量. 如果在这个函数内部创建一个闭包,那么闭包通过自己的作用域链也可以访问这些变量,

  • JavaScript作用域链实例详解

    JavaScript作用域链实例详解

    本文实例讲述了JavaScript作用域链.分享给大家供大家参考,具体如下: 跟其他语言一样,变量和函数的作用域揭示了这些变量和函数的搜索路径.对于JavaScript而言,理解作用域更加重要,因为在JavaScript中,作用域可以用来确定this的值,并且JavaScript有闭包,闭包是可以访问外部环境的作用域的. 每一个JavaScript的函数都是Function对象的一个实例,Function对象有一个内部属性[[Scope]],这个属性只能被JavaScript的引擎访问.通过[[

  • JavaScript模块模式实例详解

    本文实例讲述了JavaScript模块模式.分享给大家供大家参考,具体如下: 在JS中没有Class的概念,那么如何体现Object的Public和Private属性呢,答案就是模块模式(Module Pattern). JS中有一个显著的特性: 匿名函数(anonymous function),通过匿名函数的建立和执行,匿名函数里的代码就形成了一个闭包(closure),从而形成,封装和控制一个对象的Private和Public的特性,避免了全局变量的泛滥和与其他脚本的冲突. (functio

  • javascript解析json实例详解

    本文实例讲述了javascript解析json的方法.分享给大家供大家参考.具体方法如下: 下载json库 http://www.json.org/json-zh.html自己找javascript的 或者直接去下面的 https://github.com/douglascrockford/JSON-js   php生成json格式 使用页面 复制代码 代码如下: <script src="scripts/json.js"></script>  alert(da

  • JavaScript导出Excel实例详解

    本文实例讲述了JavaScript导出Excel的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>WEB页面导出为EXCEL文

  • ES6 javascript的异步操作实例详解

    本文实例讲述了ES6 javascript的异步操作.分享给大家供大家参考,具体如下: 异步编程对 JavaScript 语言太重要. Javascript 语言的执行环境是" 单线程" 的, 如果没有异步编程, 根本没法用, 非卡死不可. ES6 诞生以前, 异步编程的方法, 大概有下面四种. ① 回调函数 ② 事件监听 ③ 发布 / 订阅 ④ Promise 对象 ES6 将 JavaScript 异步编程带入了一个全新的阶段, ES7 的Async函数更是提出了异步编程的终极解决

随机推荐