Object.prototype 原型和原型链
Object.prototype 原型和原型链
原型
Javascript中所有的对象都是Object的实例,并继承Object.prototype的属性和方法,有些属性是隐藏的。换句话说,在对象创建时会存在预定义的属性,其中有一个属性就是原型对象。在函数对象中存在原型对象prototype,在普通对象中没有prototype,但存在__proto__。或者说使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别,这个区别就是function定义的对象有一个prototype属性,使用new生成的对象就没有这个prototype属性,存在__proto__。
var o =new Object();
console.log(o.__proto__);
console.log(o.prototype);//undefined
var fn = function(){}
console.log(fn.prototype);//Object {constructor: function}
var f1 = new fn();
console.log(f1.__proto__);
console.log(f1.__proto__===fn.prototype);//true
原型链
那么__proto__是什么?每个对象都会在其内部初始化一个属性,就是__proto__。
普通对象中的__proto__是什么呢? Object的本质函数对象,是通过new Function()创建,所以Object.__proto__指向Function.prototype。同理,Function也是函数对象,因此Function.__proto__同样指向Function.prototype。 Object.prototype对象也有__proto__属性,但它比较特殊,为null。这个由__proto__串起来的直到Object.prototype.__proto__为null的链就是原型链。
console.log(Object.__proto__ === Function.prototype);//true
console.log(Function.__proto__===Function.prototype);//true
console.log(Object.prototype.__proto__);//null
当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。参考下面的例子:
var Fn = function(){};
Fn.prototype.Hello = function(){
console.log("Hello World");
}
var f1 = new Fn();
f1.Hello();//Hello World
首先var f1=new fn(),f1是Fn的实例,可以得出f1.__proto__=Fn.prototype。当我们调用f1.hello()时,首先f1中没有Hello这个属性,于是,它会到他的__proto__中去找,也就是Fn.prototype,而我们在上面定义了 Fn.prototype.Hello=function(){}; 于是,就找到了对应的方法。
从一个更复杂的例子中看原型链的原理:
var Person = function() {};
Person.prototype.Name = function() {
console.log("person name");
}
Person.prototype.Sex = "male or female";
var Younger = function() {};
Younger.prototype = new Person();
Younger.prototype.Age = function() {
console.log("14-28")
};
Younger.prototype.Sex = "female";
var Ann = new Younger();
Ann.Name(); //person name
console.log(Ann.Age()); //14-28
console.log(Ann.Sex); //female
对上述代码,我们可以进行如下分析:
var Younger = function() {}=>:Younger.__proto__=Person.prototype,
Younger.prototype = new Person()=>:Younger.prototype.__proto__ = Person.prototype,
var Ann = new Younger()===>Ann.__proto__=Younger.prototype,
综上可得:
Ann.__proto__.__proto__ = Person.prototype
Ann本身没有Name()方法,于是从Ann.__proto__(Younger.prototype)中找,仍没有找到于是在向上一层Ann.__proto__.__proto__(Person.prototype)中寻找,最终在Person.prototype中找到对应的方法并调用。
同理,Ann本身并没有Age()方法,但在Ann.__proto__(Younger.prototype)存在。
对于Ann.Sex,在Ann.__proto__(Younger.prototype)中已经能够找到,便不再向上寻找,因此输出是female。
Object.prototype 原型和原型链的更多相关文章
- js原型和原型链,以及__proto__、prototype属性
__proto__和prototype属性: 1.__proto__属性: 在JS里,万物皆对象(函数是对象.原型也是对象...).对象都具有属性__proto__,这个属性会指向该对象的原型. 2. ...
- JavaScript深入之从原型到原型链(本文转载)
JavaScript深入之从原型到原型链(本文转载) https://github.com/mqyqingfeng/Blog.原文地址 构造函数创建对象 我们先使用构造函数创建一个对象: functi ...
- 彻底搞懂js原型与原型链
原生的原型链 function fn(){},fn 为 Function的一个实例,原型链为 null -> Object -> Function -> fn: fn.__proto ...
- JavaScript深入之从原型到原型链
构造函数创建对象 我们先使用构造函数创建一个对象: function Person(){} var person = new Person(); person.name = 'Kevin'; cons ...
- JavaScript深入系列(一)--原型和原型链详解
构造函数创建对象 首先我们先使用构造函数创建一个对象: function Person(){} var person = new Person(); person.name = 'tom'; cons ...
- JavaScript 深入之从原型到原型链
1 .构造函数创建对象 我们先使用构造函数创建一个对象: function Person(){ } var p = new Person(); p.name = 'ccy'; console.log( ...
- (转)JavaScript深入之从原型到原型链
构造函数创建对象 我们先使用构造函数创建一个对象: function Person() { } var person = new Person(); person.name = 'Kevin'; co ...
- JS基础-该如何理解原型、原型链?
JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...
- JavaScript深入之从原型到原型链(转载)
构造函数创建对象 我们先使用构造函数创建一个对象: function Person() { } var person = new Person(); person.name = 'Kevin'; co ...
- 原型,原型链,给予原型和class的继承
学习react的时候遇到了class方式的继承语法,原理和代码的解释很详细,值得一读. 原型每个函数(构造函数)都有一个 prototype 属性,指向该函数(构造函数)的原型对象.实例没有 prot ...
随机推荐
- 【bzoj2600】 [Ioi2011]ricehub
如果发现尾指针到头指针这段稻田的中位数上建一个粮仓时距离之和超过了B 就调整尾指针对距离维护一个前缀和 每次取中位数之后可以O(1)计算距离和 #include<algorithm> #i ...
- UVA 213 Message Decoding 【模拟】
题目链接: https://cn.vjudge.net/problem/UVA-213 https://uva.onlinejudge.org/index.php?option=com_onlinej ...
- 如何在linux 32位机器编译64位程序
编译64位程序,不一定要编译机器是64位的,但是32位机器默认安装的gcc编译环境还是不能用来编译64位程序. 编译64位程序,需要加上-m64编译器参数,默认安装的gcc已经支持该参数,但是缺少64 ...
- JSP-Runoob:JSP开发环境搭建
ylbtech-JSP-Runoob:JSP开发环境搭建 1.返回顶部 1. JSP 开发环境搭建 JSP开发环境是您用来开发.测试和运行JSP程序的地方. 本节将会带您搭建JSP开发环境,具体包括以 ...
- Nginx配置try_files实践一
参考资料: http://linuxplayer.org/2013/06/nginx-try-files-on-multiple-named-location-or-serverhttp://stac ...
- Vigenère密码 2012年NOIP全国联赛提高组(字符串模拟)
P1079 Vigenère 密码 题目描述 16 世纪法国外交家 Blaise de Vigenère 设计了一种多表密码加密算法――Vigenère 密 码.Vigenère 密码的加密解密算法简 ...
- c++ rand && srand 函数
RAND: 结构:rand() 注:rand()不需要参数,它会根据种子返回一个从0到最大随机数的任意整数. 作用:生成一个随机数. 头文件:#include <cstdlib> ...
- [Qt Creator 快速入门] 第8章 界面外观
一个完善的应用程序不仅应该有实用的功能,还要有一个漂亮的外观,这样才能使应用程序更加友好,更加吸引用户.作为一个跨平台的UI开发框架,Qt提供了强大而灵活的界面外观设计机制.这一章将学习在Qt中设计应 ...
- 构造 Codeforces Round #275 (Div. 2) C. Diverse Permutation
题目传送门 /* 构造:首先先选好k个不同的值,从1到k,按要求把数字放好,其余的随便放.因为是绝对差值,从n开始一下一上, 这样保证不会超出边界并且以防其余的数相邻绝对值差>k */ /*** ...
- 题解报告:poj 3669 Meteor Shower(bfs)
Description Bessie hears that an extraordinary meteor shower is coming; reports say that these meteo ...