总结:

1、每一个函数都有一个prototype属性,默认指向object空对象(原型对象),

每一个原型对象都有一个constructor属性,指向函数对象.

eg: Person函数:     Person.prototype.constructor == Peroson

2、给原型对象添加属性作用:函数的所有对象都自动拥有原型当中的属性。 eg:

  Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin

  每个函数:都有一个prototype,即显式原型

  每个对象:都有一个__proto__属性,即隐式原型

  即:对象的隐式原型的值,相当于构造函数的显式原型的值

  eg:person.__proto__ == Person.prototype

3、object的原型对象,是原型链尽头

===========================================================

1、构造函数创建对象:

function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person

2、每个函数都有一个 prototype 属性
每个对象(null除外),自动拥有原型当中的属性

function Person() {

}
// 虽然写在注释里,但是你要注意: prototype是函数才会有的属性
Person.prototype.name = 'Kevin'; //
var person1 = new Person(); //
var person2 = new Person(); //
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

3、每个对象对象(除了 null ),都有一个属性,叫proto,这个属性会指向该对象的原型

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true 对象的__proto__属性 === 构造函数的prototype

  

4、constructor, 每个原型都有一个 constructor 属性,指向构造函数,见图

function Person() {

}
console.log(Person === Person.prototype.constructor); // true
function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

 实例与原型

function Person() {
} Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';
console.log(person.name) // Daisy
delete person.name;
console.log(person.name) // Kevin

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

原型与原型
var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin
            原型链               
console.log(Object.prototype.__proto__ === null) // true
 

JavaScript 只是在两个对象之间创建一个关联,这样可以通过继承访问另一个对象的属性和函数

js的原型和原型链的更多相关文章

  1. Js 原型和原型链

    Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...

  2. 【repost】JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  3. JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  4. JS原型与原型链终极详解(转)

    JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...

  5. 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...

  6. JS原型和原型链

        1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...

  7. 第20篇 js高级知识---深入原型链

    前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...

  8. 深入JS原型与原型链

    要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...

  9. JS 原型与原型链

    图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...

  10. js之原型,原型链

    1.原型是什么?    在构造函数创建出来的时候,系统会默认的创建并关联一个对象,这个对象就是原型,原型对象默认是空对象    默认的原型对象中会有一个属性constructor指向该构造函数  原型 ...

随机推荐

  1. Java学习之路【第一篇】:前言

    Java 语言概述 一.什么是Java语言 Java语言是美国Sun公司(Stanford University Network),在1995年推出的高级的编程语言.所谓编程语言,是计算机的语言,人们 ...

  2. [站点推荐]001.学习新技能的37个最佳网站(The 37 Best Websites To Learn Something New)

    忘了过于褒奖的学校.整天呆在拥挤的教室而效果却差得可怜.这些网站和应用涵盖了科学.艺术和技术的无数话题.它们可以教会你实践练习任何技能,从制作豆 沙到用 node.js 开发 app,而且它们都是免费 ...

  3. 【Python】自己写日志功能

    Python有自带的logging模块,用于日志记录,功能很强大,但不好用,使用挺麻烦的,而且发现了几个bug,调用了一个logger.warning()一次,结果日志文件中出现了n行记录,且逐渐变成 ...

  4. JavaScript ——内部函数和匿名函数

    在JS中,函数是一种数据类型,可以将它赋值给变量,因此函数可以这样创建: var func=function(){ alert("func"); } func(); 既然函数是一种 ...

  5. try catch finally return 轶事

    最近阿里发布了java开发手册终极版,看到其中一条规约:[强制]不能在 finally 块中使用 return, finally 块中的 return 返回后方法结束执行,不会再执行 try 块中的 ...

  6. Alpha冲刺 —— 5.9

    这个作业属于哪个课程 软件工程 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 Alpha冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.会议内容 1.总 ...

  7. Take advantage of Checkra1n to Jailbreak iDevice for App analysis

    An unpatchable bootrom exploit called "checkm8" works on all iDevices up until the iPhone ...

  8. 通过Android studio手动触发Android 上层GC(垃圾回收)的方法

    1.打开android Studio, 2.菜单栏中点击"View"--"Tools Window"--"Profiler",可以看到对应的 ...

  9. Java实现 蓝桥杯VIP 算法训练 水仙花数

    这道题有两个方法,第一个就相对来说通俗易懂 第二个可以用到Java的一些方法 public class 水仙花数1 { public static void main(String[] args) { ...

  10. Java实现 LeetCode 321 拼接最大数

    321. 拼接最大数 给定长度分别为 m 和 n 的两个数组,其元素由 0-9 构成,表示两个自然数各位上的数字.现在从这两个数组中选出 k (k <= m + n) 个数字拼接成一个新的数,要 ...