简单介绍 javascript 中 __proto__ 属性的原理
来源:互联网 发布:mac破解软件安装 编辑:程序博客网 时间:2024/06/05 14:35
重要说明:本博已迁移到 石佳劼的博客,有疑问请到 文章新地址 留言!!!
在 javascript 中我们会约定俗成,如果一个方法是被 new 出来使用的,那么该方法名首字母通常会大写,例如下面代码块中的 Person。(我们也可以把 Person 看成 java 或 c# 中的类)
var Person = function(name) { this.name = name;}
在 javascript 中一个类被 new 出来的具体过程如下:
// 初始化一个对象 pvar p = new Person();
// 初始化一个对象 pvar p = {};p.__proto__ = Person.prototype;Person.call(p);
以上两段代码的作用完全一样,关键在第2段代码的第2行,我们来证明一下:
var p = new Person();console.log(p.__proto__ === Person.prototype); // true
上面这段代码返回的true,说明我们第2段代码是正确的。
那么__proto__是什么?
简单来说,在 javascript 中每个对象都会有一个 __proto__ 属性,当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去 __proto__ 里找这个属性,这个 __proto__ 又会有自己的 __proto__,于是就这样一直找下去,也就是我们平时所说的原型链的概念。
按照标准,__proto__ 是不对外公开的,但是 chrome 的引擎却将他暴露了出来成为了一个公有属性,我们可以对其进行访问和赋值。但 ie 浏览器是不能访问这个属性的,所以不推荐大家直接操作这个属性,以免造成浏览器兼容问题。
概念说清楚了,让我们看段代码:
var Person = function() {};Person.prototype.say = function() { alert("Person say");}var p = new Person();p.say(); // Person say
这段代码很简单,相信每个人都这样写过,那就让我们看下为什么 p 可以访问 Person 的 say。它等同于下面这段代码:
var Person = function() {};Person.prototype.say = function() { alert("Person say");}var p = {};p.__proto__ = Person.prototype;Person.call(p);p.say(); // Person say
当我们调用 p.say() 时,p 中是没有 say 属性,于是到 p 的 __proto__ 属性中去找,也就是 Person.prototype,而我们定义了 Person.prototype.say=function(){}; 于是,p 在 Person.prototype 中就找到了这个方法。
过程:p –> p.__proto__ === Person.prototype
接下来,让我们看个更复杂的代码。
var Person = function() {};Person.prototype.say = function() { console.log("Person say");}Person.prototype.salary = 50000;var Programmer = function() {};Programmer.prototype = new Person();Programmer.prototype.writeCode = function() { console.log("Programmer writes code");};Programmer.prototype.salary = 500;var p = new Programmer();p.say(); // Person sayp.writeCode(); // Programmer writes codeconsole.log(p.salary); // 500
大家先不要看下面的推导过程,自己试着推导一下。
var Person = function() {};Person.prototype.say = function() { console.log("Person say");}Person.prototype.salary = 50000;var Programmer = function() {};Programmer.prototype = new Person();// 推导过程 --> // Programmer.prototype = {};// Programmer.prototype.__proto__ = Person.prototype;// Person.call(Programmer.prototype);Programmer.prototype.writeCode = function() { console.log("Programmer writes code");};Programmer.prototype.salary = 500;var p = new Programmer();// 推导过程 --> // var p = {};// p.__proto__ = Programmer.prototype;// p.__proto__ = new Person();// p.__proto__.__proto__ = Pserson.prototype;// Person.call(p.__proto__);// Programmer.call(p);p.say(); // Person sayp.writeCode(); // Programmer writes codeconsole.log(p.salary); // 500
当我们调用 p.say() 时,p 中是没有 say 属性,于是到 p 的 __proto__ 属性中去找,也就是 Programmer.prototype,此时 Programmer.prototype 是等于 new Person(),但 new Person() 中也没有 say 属性,于是又到 new Person().__proto__ 中找,此时 new Person().__proto__ 等于 Pserson.prototype 的,我们定义了 Person.prototype.say=function(){}; 所以,p 在 Person.prototype 中就找到了这个方法。
过程:
p –>
p.__proto__ === Programmer.prototype === new Person() –>
p.__proto__.__proto__ === Programmer.prototype.__proto__ === new Person().__proto__ === Pserson.prototype
调用 p.writeCode() 和 p.salary 也都是同样的原理,大家自己推导。
重中之重,只要大家理解了下面段代码,就能轻而易举的掌握 javascript 的原型链知识。
var Person = function(name) { this.name = name;}// 初始化一个对象 pvar p = new Person();// 推导过程 --> // var p = {};// p.__proto__ = Person.prototype;// Person.call(p);
参考资料:关于__proto__和prototype的一些理解
欢迎来到 石佳劼的博客,如有疑问,请在「原文」评论区 留言,我会尽量为您解答。
- 简单介绍 javascript 中 __proto__ 属性的原理
- JavaScript中__proto__与prototype的关系
- JavaScript中__proto__与prototype的关系
- JavaScript中__proto__与prototype的关系
- JavaScript中__proto__与prototype的关系
- JavaScript中__proto__与prototype的关系
- JavaScript中__proto__与prototype的关系
- JavaScript中__proto__与prototype的关系
- JavaScript中__proto__与prototype的关系
- javascript的属性拷贝prototype.__proto__ 的用法
- es6 javascript的__proto__ 属性, Object.setPrototypeOf() , Object.getPrototypeOf()
- 【JavaScript】浅谈JavaScript prototype和__proto__属性
- JavaScript中__proto__与prototype
- JavaScript中__proto__与prototype的关系深入理解
- javaScript中__proto__与prototype的区别与联系
- JavaScript中__proto__与prototype的关系深入理解
- javascript中prototype、constructor以及__proto__之间的三角关系
- JavaScript中对象的 constructor 属性介绍
- 杭电2037的思路
- windows 和kali-linux双系统的安装
- 寒假杭电acm3
- 排列和组合
- weak_ptr
- 简单介绍 javascript 中 __proto__ 属性的原理
- xcode6.3 ineligible devices解决方法
- 类成员函数继承(virtual、非virtual)
- 4000点了,现在买A股晚不晚
- android控件-EditText
- EventBus使用详解(二)——EventBus使用进阶
- 数据结构学习——散列表ADT(程序化)
- Eclipse常用快捷键
- DbUtils源码分析系列(三)