<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

 </head>

 <body>

   <script>

     /**

       1.什么是原型

       1-1：构造函数的prototype属性就是原型

       1-2：只有构造函数才有prototype属性

       1-3：构造函数一旦被创建，js引擎就帮我们自动创建好了prototype属性

       1-4：prototype属性的值就是一个对象，主要作用就是用来共享数据

     */

     /**

       2.原型的使用原则

       2-1：将公用的属性或者方法放在原型上（如果直接放在构造函数上会比较占用内存，浪费资源）

       2-2：由构造函数创建出来的对象，会默认链接到它的原型上，也就是构造函数的prototype属性上

     */

     // ex

     var demoObj = function (obj) {

       this.name = obj.name

     }

     console.log(demoObj.prototype, typeof demoObj.prototype) // prototype属性的值是一个对象

     // 尝试给构造函数的prototype属性添加属性

     demoObj.prototype.siHi = function () {

       console.log(`哈哈`)

     }

     // 实例化对象

     var newObj = new demoObj({

       name: 'ethans'

     })

     // 我们发现实例化的对象直接可访问到构造函数的prototype属性上（这里有一个属性搜索原则的问题（即先去构造函数中查看，如果没有就会上他的原型中去找））

     newObj.siHi()

     /**

       3.非标准属性__proto__

       3-1: 实例化出来的对象都有一个__proto__属性

       3-2：这个属于是非标准的，是浏览器提供的

       3-3：对象的__proto__和构造函数的prototype指向同一个对象

     */

     console.log(newObj.__proto__ === demoObj.prototype) // true

     /**

       4.prototype和__proto__的区别于联系

       4-1：实例对象具有__proto__属性

       4-2：构造函数具有prototype属性

       4-3：实例对象的__protp__属性和构造函数的prototype属性指向同一个对象即：newObj.__proto__ === demoObj.prototype

       4-4: __proto__是一个非标准属性，不要再实际项目中使用，可以再开发阶段用来查看的对象的原型是哪一个

     */

     /**

       5.constructor

       5-1: 只要是构造函数就会有一个prototype属性；

       5-2：默认情况下prototype中会有一个constructor属性；

       5-3：prototype中的constructor属性又指向了当前的构造函数

     */

      console.log(demoObj.prototype.constructor === demoObj) // true

   </script>

 </body>

 </html>

6.prototype和__proto__和constructor三者的关系图

7.属性搜索原则

7.1 先会在对象本身查找，如果找到了该属性，就直接返回
7.2 如果没有找到就会到 原型对象 中查找属性，如果找到了就会返回
7.3 如果在原型中没有找到该属性，会会到 原型对象 的 原型对象 中查找
7.4 直到搜索到 Object.prototype ，如果找到了，就直接返回， 如果还没有找到，就会返回undefined
  var Person = function(){}
        var p = new Person();
        // 给构造函数的原型添加属性
        // Person.prototype.name = '小明';
        // 给构造函数的原型的原型对象添加属性
        // Person.prototype.__proto__.name = '小明';
        // 构造函数的原型的原型对象其实质就是Object.prototype
        console.log(Person.prototype.__proto__===Object.prototype);//=>true
        Object.prototype.name='小明';
        console.log(p.name);
// 属性搜索原则，
// 先去构造函数中去找，如果找到了就直接返回，如果没有
// 再去构造函数的原型中去找，如果找到了，就直接返回，如果没有
// 再去构造函数的原型的原型对象中去找，找到了就返回，如果没有
// 再去原型对象的原型对象的原型对象中去找，如果找到了就直接返回，如果还没有就返回undefined
// 翻译成代码就是，Person.prototype=>Person.prototype.__proto__(Object.prototype)=>null
 
8.查找toString的过程
  function Person() {

  }

  var p1 = new Person();

  // 查找toString方法的过程：

  // 1 在 p1 中找

  // 2 在 Person.prototype 中查找

  // 3 在 Person.prototype 的原型中查找

  p1.toString();

  console.log(p1.__proto__)

  console.log(p1.__proto__.__proto__)

  console.log(p1.__proto__.__proto__.__proto__)

  console.log('toString' in p1.__proto__);//true
 
9.面向对象的三大特征
 
封装
     将复杂的代码逻辑进行封装，将简单的调用暴露出来
     使用函数进行封装；
     函数是对一段代码逻辑的封装
     目的：是为了对一段代码逻辑进行复用
     对象：无序键值对的集合
          对象是对数据（属性）和行为（方法的）封装
继承
     子类会从父类中继承属性和方法，这样子类就可以使用父类中的方法和属性
多态
 

2.js原型的基本概念的更多相关文章

  1. 深入分析JS原型链以及为什么不能在原型链上使用对象

    在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...

  2. JS 原型链

    之前对JS的prototype知识比较模糊,今天理清了记下来,以防忘记,直切正题: 1.要明白原型链,就必须先清楚JS的构造函数模式: js是面向对象的语言,既然是面型对象,就一定会有一个对象的模板, ...

  3. js原型

    1.js基本类型和对象类型 js的简单类型包括数字(其中NaN为数字类型).字符串(类似'A'为字符,js没字符类型).布尔值.null值和undefined值.其他所有的值都是对象.数字.字符串和布 ...

  4. JS 原型链图形详解

    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...

  5. js原型解析

    我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node. ...

  6. JS原型的剖析与理解

    原型相关的概念 关于面向对象的概念 类 class 在js中就是构造函数 在传统的面向对象语言中,使用一个叫类的东西定义模版,然后使用模版创建对象 在构造方法中也具有类似的功能,因此称其为类 实例与对 ...

  7. 理解JS原型和原型链

    本文通过对<JavaScript高级程序设计>第六章的理解,加上自己的理解,重组了部分内容,形成下面的文字. 理解了原型这个概念,你的JS世界会清明很多. 为什么要为JS创造原型这个概念 ...

  8. js原型和原型链理解到面向对象

    一.js中的两种对象,普通对象和函数对象 var obj1 = {}; var obj2 =new Object(); var obj3 = new obj1(); function fun1(){} ...

  9. 37.js----浅谈js原型的理解

    浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面 ...

随机推荐

  1. bzoj1016 [JSOI2008]最小生成树计数——Kruskal+矩阵树定理

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1016 从 Kruskal 算法的过程来考虑产生多种方案的原因,就是边权相同的边有一样的功能, ...

  2. KeepAlived的配置

    KeepAlived的相关配置 KeepAlived 配置 参考帮助 man keepalived.conf 配置文件组件部分: top hierachy(层次) global configurati ...

  3. bzoj 1016: [JSOI2008]最小生成树计数【dfs+克鲁斯卡尔】

    有一个性质就是组成最小生成树总边权值的若干边权总是相等的 这意味着按边权排序后在权值相同的一段区间内的边能被选入最小生成树的条数是固定的 所以先随便求一个最小生成树,把每段的入选边数记录下来 然后对于 ...

  4. CF482C Game with Strings

    题意 你和你的朋友玩一个游戏,游戏规则如下. 你的朋友创造 n 个长度均为 m 的不相同的字符串,然后他随机地选择其中一个.他选择这些字符串的概率是相等的,也就是说,他选择 n 个字符串中的每一个的概 ...

  5. ACM_完全背包

    背包3 Time Limit: 2000/1000ms (Java/Others) Problem Description: 有n种(每一种有无数个)重量和价值分别为Wi,Vi的物品,现从这些物品中挑 ...

  6. c/c++导出lua绑定

    [转载]https://note.youdao.com/share/?id=0f4132271151c4b62f9afb712e8304d9&type=note#/ 1.在纯C环境下,把C函数 ...

  7. Java开发笔记（九十二）文件通道的基本用法

    前面介绍的各色流式IO在功能方面着实强大,处理文件的时候该具备的操作应有尽有,可流式IO在性能方面不尽如人意,它的设计原理使得实际运行效率偏低,为此从Java4开始增加了NIO技术,通过全新的架构体系 ...

  8. iOS中ARC和非ARC混用

    如果在使用第三方类库的时候,我们可能会遇到一些内存管理的问题   那么如何在一个工程中实现ARC和非ARC混用呢,例如你创建一个ARC的工程,但是你引用的第三方类库是非ARC管理内存的   首先点击工 ...

  9. JavaScript 单例，Hash，抛异常

    1. 单例 ECMA 5 版 记得以前写过几种单例实现,找不到了... function Singleton() { if (this.constructor.instance) { return t ...

  10. iOS,Core Animation--负责视图的复合功能

    简介 UIKit API UIKit是一组Objective-C API,为线条图形.Quartz图像和颜色操作提供Objective-C 封装,并提供2D绘制.图像处理及用户接口级别的动画.    ...