想了解原型和原型链,我觉得首先我们得知道javascript里有一个Object 与 Function,它俩都是构造函数,当然函数也是一个对象。我们打印Object 与 Function看一下,

console.log(Function)

console.log(Object)

那么这个Object 与 Function 之间有何关系与区别呢?首先您只需要记住:

1. 所有普通对象都是 Object 的实例(也就是说Object是所有普通对象的爸爸);

2. 所有普通函数都是 Function 的实例(也就是说Function是所有普通函数的爸爸);

3. Function是 Object 的实例;(Object是所有对象的爸爸)

构造函数与原型对象的区别:

Object是构造函数,而Object.prototype是构造函数的原型对象。构造函数自身的属性和方法无法被共享,而原型对象的属性和方法可以被所有实例对象所共享。

其次,constructor属性是原型对象上的一个属性,可以被所有实例对象所共享。要注意的是,prototype是构造函数的属性,而constructor则是构造函数的prototype属性所指向的那个对象,也就是原型对象的属性。由于constructor属性是一种原型对象和构造函数的关系,所以在修改原型对象的时候,一定要注意constructor的指向问题。

接下来我们说重点,javascript里的__proto__ 和 prototype 属性。

1. 所有的对象都有__proto__ 属性,可通过__proto__属性来访问这个对象的原型,而 __proto__ 指向的是它原型对象的prototype 属性(对象没有prototype属性);

2. 所有的构造函数都有一个prototype 和 __proto__ 属性,而该函数的prototype属性指向的是它原型对象上的constructor属性。

代码实例:

var A = function () {} // 申明一个函数对象A;

var B = new A(); // 为A创建一个实例B;

console.log("A.prototype:", A.prototype);

console.log("B.__proto__:", B.__proto__);

console.log(A.prototype === B.__proto__);

Prototype 的作用:

可以为原型的实例设置公用的属性或方法;

var A = function () {

    this.ary1 = [];

}

var B = new A();

var C = new A();

B.ary1.push(1);

C.ary1.push(2);
console.log(B.ary1)     console.log(C.ary1)   
A.prototype.ary2 = [];

B.ary2.push(1);

C.ary2.push(2);

console.log(B.ary2); 

 

最后总结下什么是原型链:

所有的对象都有一个__proto__属性,我们通过对象的__proto__属性一层层的向上访问,最终会得到值null;那么我们访问的整个路径就是这个对象的原型链。

(感觉个人理解还是不够深刻,这里只是记录一下自己目前对于原型链的理解,多多指教!)

 

javascript原型与原型链个人理解的更多相关文章

  1. 深入理解JavaScript作用域和作用域链

    前言 JavaScript 中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! ...

  2. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...

  3. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

  4. <深入理解JavaScript>学习笔记(5)_强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. (prototypal :原型.学好英语还是很重要的) 虽然这经常被当作是 JavaScript 的缺点 ...

  5. 深入理解JavaScript系列(5):强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...

  6. javascript系列--认识并理解构造函数,原型和原型链

    一.前言 介绍构造函数,原型,原型链.比如说经常会被问道:symbol是不是构造函数:constructor属性是否只读:prototype.[[Prototype]]和__proto__的区别:什么 ...

  7. 如何理解JavaScript的原型和原型链

    在现在的业务开发中,应该很少人在写原生JavaScript了,大家都一股脑地扑在各个框架上.本来,这些框架对于业务和开发者来说是一种福音,减少了各种各样的开发痛点,但是带来的负面问题就是对于开发者来说 ...

  8. 上帝视角一文理解JavaScript原型和原型链

    本文呆鹅原创,原文地址:https://juejin.im/user/307518987058686/posts 前言 本文将从上帝角度讲解JS的世界,在这个过程中,大家就能完全理解JS的原型和原型链 ...

  9. javascript 原型及原型链的初步理解

    最近折腾了好久,终于是把js里面的原型和原型链做了个初步的理解: 在这里,我打个比喻: 我(child),我妈constructor(构造函数)生了我:别人问我老妈跟谁生的我,于是此时我妈会指向我爸爸 ...

随机推荐

  1. 删除github上的一个repository

    在学github之初,我们免不了会建立一些简单的repository,那么,如何删掉它们呢? 第一步,打开所要删除的repository,比如:meilin.github.io 第二步,点击setti ...

  2. LC 357. Count Numbers with Unique Digits

    Given a non-negative integer n, count all numbers with unique digits, x, where 0 ≤ x < 10n. Examp ...

  3. Log4J日志组件

    Log4j,  log for java, 开源的日志组件! 使用步骤: 1. 下载组件,引入jar文件; log4j-1.2.11.jar 2. 配置 :  src/log4j.properties ...

  4. 190628 - 解决新版本LastPass没有谷歌套件时打开就闪退的问题.md

    目录 解决新版本LastPass没有谷歌套件时打开就闪退的问题 可用解决方案 可用解决方案3 可用解决方案2 可用解决方案1 尝试安装 碰到的问题列表 问题现象 解决新版本LastPass没有谷歌套件 ...

  5. "并发用户数量"的正确英文表示

    并发用户数量the number of concurrent users 最佳并发用户数量the optimum number of concurrent users 最大并发用户数量 the max ...

  6. ABAP 判断字符串是否是数字

    通过正则表达式: IF cl_abap_matcher=>matches( pattern = '^(-?[1-9]\d*(\.\d*[1-9])?)|(-?0\.\d*[1-9])$' tex ...

  7. iOS实现渐变颜色

    下面是我的两种实现: 1.直接图片展示,注意图片的变形问题; 2.用CAGradientLayer渐变颜色实现; 代码如下: // // ViewController.m // ImageStrenc ...

  8. Tor路径选择说明

    Tor Path Specification Roger Dingledine Nick Mathewson Note: This is an attempt to specify Tor as cu ...

  9. jquery中this与$(this)的用法区别

    jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...

  10. Django模板系统-内置和自定义Filters

    django模板中最常用的两种特殊符号是 {{ }} 用来表示变量和 {% %} 用来表示逻辑相关的操作 变量 {{ 变量名 }} ,由字母数字下划线组成而.在模板语言中有特殊含义,用来获取对象相应的 ...