JavaScript原型

作者: nomooo | 来源:发表于2019-03-17 16:40 被阅读24次
创建对象的三种方式
  • 字面量的方式
  • 调用系统的构造函数
  • 自定义构造函数方式
//实例对象
    var per1={
      name:"卡卡西",
      age:20,
      sex:"男",
      eat:function () {
        console.log("吃臭豆腐");
      },
      readBook:function () {
        console.log("亲热天堂");
      }
    };
//调用系统的构造函数
           var per2=new Object();
           per2.name="大蛇丸";
           per2.age=30;
           per2.sex="男";
           per2.eat=function () {
             console.log("吃榴莲");
           };
           per2.play=function () {
             console.log("这个小蛇真好玩");
           };
        
           function Person() {
        
           }
           console.log(per2 instanceof Object);
        
           var dog=new Object();
//自定义构造函数
        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.play = function() {
                console.log("天天打游戏");
            };
        }
        var per = new Person("雏田", 18, "女");
        console.log(per instanceof Person);

自定义构造函数创建对象做的事情

      function Person(name,age) {
        this.name=name;
        this.age=age;
        this.sayHi=function () {
          console.log("您好");
        };
      }
      //创建对象---->实例化一个对象,的同时对属性进行初始化
      var per=new Person("小红",20);

      /*
      * 1.开辟空间存储对象
      * 2.把this设置为当前的对象
      * 3.设置属性和方法的值
      * 4.把this对象返回
      * */

使用工厂模式创建对象

      function createObject(name,age) {
        var obj=new Object();
        obj.name=name;
        obj.age=age;
        obj.sayHi=function () {
          console.log("您好");
        };
        return obj;
      }
      function Person(name,age) {
        this.name=name;
        this.age=age;
        this.sayHi=function () {
          console.log("您好");
        };
      }
      //创建对象---->实例化一个对象,的同时对属性进行初始化

      /*
      * 共同点:都是函数,都可以创建对象,都可以传入参数
      *
      * 工厂模式:
      * 函数名是小写
      * 有new,
      * 有返回值
      * new之后的对象是当前的对象
      * 直接调用函数就可以创建对象
      *
      * 自定义构造函数:
      * 函数名是大写(首字母)
      * 没有new
      * 没有返回值
      * this是当前的对象
      * 通过new的方式来创建对象
      * */
      var per1=new Person("小红",20);

      var per2=createObject("小明",20);

构造函数和实例对象之间的关系

        //面向对象的思想是----抽象的过程---->实例化的过程

        //小苏这个人,姓名,年龄,性别, 吃饭,打招呼,睡觉

        //自定义构造函数----->实例化对象
        function Person(name,age,sex) {
          this.name=name;
          this.age=age;
          this.sex=sex;
          this.eat=function () {
            console.log("吃大蒜拌臭豆腐加榴莲酱");
          };
        }
        //构造函数---->创建对象
        var per=new Person("小苏",38,"女");
        //per.eat();//吃
        //实例对象是通过构造函数来创建
        //把这个对象的结构显示出来
        console.dir(per);
        console.dir(Person);


        //实例对象的构造器(构造函数)
        //实例对象的构造器是指向Person的,结果是true,所以,这个实例对象per就是通过Person来创建的
        console.log(per.constructor==Person);//

        console.log(per.__proto__.constructor==Person);
        console.log(per.__proto__.constructor==Person.prototype.constructor);



        //构造函数
        function Animal(name) {
          this.name=name;
        }
        //实例对象
        var dog=new Animal("大黄");
        console.dir(dog);//实例对象
        console.dir(Animal);//构造函数的名字

        console.log(dog.__proto__.constructor==Person);
        console.log(dog.__proto__.constructor==Animal);


        //判断这个对象是不是这种数据类型
        console.log(dog.constructor==Animal);

        console.log(dog instanceof Person);



        //总结:
        /*
        * 实例对象和构造函数之间的关系:
        * 1. 实例对象是通过构造函数来创建的---创建的过程叫实例化
        * 2.如何判断对象是不是这个数据类型?
        *  1) 通过构造器的方式 实例对象.构造器==构造函数名字
        *  2) 对象 instanceof 构造函数名字
        *  尽可能的使用第二种方式来识别,为什么?原型讲完再说
        *
        *
        *
        * */
构造函数创建对象带来的问题
        function Person(name,age) {
          this.name=name;
          this.age=age;
          this.eat=myEat;
        }
        var per1=new Person("小白",20);
        var per2=new Person("小黑",30);

        console.dir(per1);
        console.dir(per2);
        console.log(per1.eat==per2.eat);
        //通过原型来解决---------数据共享,节省内存空间,作用之一
        //
        //    per1.eat();
        //    per2.eat();
        //    //不是同一个方法
        //    console.log(per1.eat==per2.eat);
        //
        //    for(var i=0;i<100;i++){
        //      var per=new Person("嘎嘎",20);
        //      per.eat();
        //    }
原型添加方法解决数据共享问题
      function Person(name,age) {
        this.name=name;
        this.age=age;
      }
      //通过原型来添加方法,解决数据共享,节省内存空间
      Person.prototype.eat=function () {
        console.log("吃凉菜");
      };

      var p1=new Person("小明",20);
      var p2=new Person("小红",30);
      console.log(p1.eat==p2.eat);//true

      console.dir(p1);
      console.dir(p2);
原型
    function Person(name,age) {
      this.name=name;
      this.age=age;
    }
    //通过原型来添加方法,解决数据共享,节省内存空间
    Person.prototype.eat=function () {
      console.log("吃凉菜");
    };

    var p1=new Person("小明",20);
    var p2=new Person("小红",30);

    console.dir(p1);
    console.dir(p2);
    console.dir(Person);
    p1.__proto__.eat();

    console.log(p1.__proto__==Person.prototype);

原型对象中有proto这个属性,叫原型,也是一个对象,这个属性是给浏览器使用的,不是标准的属性
构造函数中的prototype这个属性,叫原型,也是一个对象,这个对象是给开发者使用,是标准属性
实例对象的proto和构造函数中的prototype相等 -->true
实例对象是通过构造函数来创建的,构造函数中有原型对象prototype

总结

    //构造函数

    function Person(sex,age) {
      this.sex=sex;
      this.age=age;
    }
    //通过原型添加方法
    Person.prototype.sayHi=function () {
      console.log("打招呼,您好");
    };
    var per=new Person("男",20);
    console.log(per.__proto__.constructor==Person.prototype.constructor);//实例对象
    console.dir(Person);//构造函数的名字

    var per2=new Person("女",30);
    console.log(per.sayHi==per2.sayHi);

实例对象中有两个属性(这两个属性是通过构造函数来获取的)

实例对象中有proto属性,叫原型,也是对象,不是标准属性,浏览器使用
构造函数中有prototype属性,也叫原型,也是对象吗,是标准属性,开发者使用

* 原型---->__proto__或者是prototype,都是原型对象,
* 原型的作用:共享数据,节省内存空间

相关附加
JavaScript原型
JavaScript中原型的简单语法
JavaScript原型链
JavaScript中的继承

相关文章

  • 原型、原型链

    理解JavaScript原型 彻底理解JavaScript原型 原型 原型是一个对象,所有对象都可以成为原型,其...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • 原型和原型链篇

    原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 原型设计模式JavaScript是一种基于...

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

  • 面试题 Javascript

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • JavaScript 基础知识点

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • JavaScript面试考点之原型及原型链

    1、JavaScript原型及原型链 1)原型 JavaScript是一种基于原型的语言,即每一个对象拥有一个原型...

  • 一文带你彻底理解 JavaScript 原型对象

    一、什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。 1.1 ...

  • JavaScript深入系列的学习(一)

    JavaScript深入之从原型到原型链JavaScript深入之词法作用域和动态作用域JavaScript深入之...

网友评论

    本文标题:JavaScript原型

    本文链接:https://www.haomeiwen.com/subject/qnyumqtx.html