<!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. Python基础第六天

    一.内容 二.练习 练习1 题目:文件的增删改查 图示: 代码: import os def add(data): content = data[1] # 文件内容 file_name = data[ ...

  2. git服务器的建立

    git简介 首先,与以前广为流行的SVN不同,git是分布式的,其没有服务器端与客户端之分(虽然在项目管理过程中,一般会人为地指定某一台非开发用的机器作为“服务器”,但就git自身功能来说,完全可以没 ...

  3. c# 生成 xml 文件

    方法一: using System; using System.Xml; using System.IO; using System.Text; public class ReadWriteXml { ...

  4. 清北考前刷题day6下午好

    /* 贪心 负数一定不取 枚举最高位是1 且答案取为0的 位置, 更新答案. */ #include<iostream> #include<cstdio> #include&l ...

  5. [Usaco2015 Jan]Moovie Mooving

    Description Bessie is out at the movies. Being mischievous as always, she has decided to hide from F ...

  6. Vue组件之间通信的三种方式

    最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...

  7. 本地编译全志R系列的步骤7（Ubuntu 17.04非长期支持版本）

    本地编译全志R系列的步骤7(Ubuntu 17.04非长期支持版本) 2017/6/29 13:49 0.获取全志R系列的Android源码包: 请通过渠道/代理商/方案公司获取全志R系列的Andro ...

  8. opencv3.3+vs2015调用笔记本摄像头成功

    先上代码 成功图片如下: #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp&g ...

  9. springboot运行模式

    1.springboot项目常见的运行方式:  2.说明: idea:在开发环境中跑项目,也就是我们在编码过程中的用的做多的方式 jar.war:线上.服务器上执行jar.war包的方式 maven插 ...

  10. viewpager滑动时页面不能刷新

    有一种解决方法就是覆盖PagerAdapter中的getItemPosition()方法,这种方案虽然简单,但是因为这种方法是让每次呼叫PagerAdapter时,都会遍历childView,通过ge ...