美文网首页H5^Study
JS高级学习:构造函数/实例对象/原型

JS高级学习:构造函数/实例对象/原型

作者: Merbng | 来源:发表于2019-04-16 22:12 被阅读0次

对象创建的三种方式:

1.字面量方式
2.调用系统的构造函数
3.自定义构造函数

<script type="text/javascript">
            // 字面量方式
            var per1 = {
                name: "看看",
                age: 20,
                sex: "男",
                eat: function() {
                    console.log("卡卡卡");
                }
            };
            // 调用系统构造函数
            var per2 = new Object();
            per2.name = "加急";
            per2.age = 30;
            per2.sex = "男";
            per2.play = function() {
                console.log("爱妈妈");
            };
            //自定义构造函数
            function Person(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
                this.play = function() {
                    console.log("啊啊女")
                }
            }
            var per3 = new Person("家啊", 30, "男");
            console.log(per3 instanceof Person);
        </script>

创建对象

实例化一个对象,的同时进行初始化

工厂模式和自定义构造函数

  • 共同点:都是函数,都可以创建对象,都可以传入参数
  • 工厂模式:
    函数名是小写,
    有new
    有返回值
    new之后的对象是当前的对象
    直接调用函数就可以创建对象
  • 自定义构造函数
    函数名是大写(首字母)
    没有new
    没有返回值
    this是当前的对象
    通过new的方式来创建对象
            function creatObject(name, age) {
                var obj = Object();
                obj.age = age;
                obj.name = name;
                obj.sayMe = function() {
                    console.log("方法");
                }
                return obj;
            }

            // 创建对象----实例化一个对象,的同时进行初始化
            function Person(name, age) {
                this.name = name;
                this.age = age;
                this.sayMe = function() {
                    console.log("方法啊")
                };
            }

构造函数和实例对象的区别

1.实例对象是通过构造函数来创建的---创建的过程叫实例化
2.如何判断对象是不是这个数据类型?

  • 1)通过构造器的方式,实例对象.构造器==构造函数的名字
  • 2)对象instanceof构造函数的名字
    尽可能的使用第二种方式来识别

通过原型来添加方法,解决数据共享,节省内存空间

        <script type="text/javascript">
            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);
        </script>

原型

  • 实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性--->__proto__ --->可以叫原型对象
  • 构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员用的,是标准的属性---> prototype -->可以叫原型对象
    实例对象的__proto__和构造函数中的prototype相等,--->ture
    又因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype
    实例对象的__proto__指向了构造函数的原型对象prototype
  • 原型的作用:共享数据,节省内存空间

三者的关系

  • 构造函数可以实例化对象
  • 构造函数中有一个属性叫prototype,是构造函数的原型对象
  • 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
  • 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
  • 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的

利用原型共享数据

  • 什么样子的数据是需要写在原型中?
    需要共享的数据就可以写原型中
  • 原型的作用之一:数据共享
  • 不需要共享的数据写在构造函数中,
  • 原型对象中的方法,可以相互调用
  • 实例对象使用的属性或方法,先在实例中查找,找到了则直接使用,找不到则去实例对象的__proto__指向的原型对象prototype中找,找了了则调用,找不到则报错

简单的原型写法

<script type="text/javascript">
            function Student(name, age) {
                this.name = name;
                this.age = age;
            }
            // 简单的原型写法
            Student.prototype = {
                constructor: Student,
                height: "111",
                weight: "55kg",
                stydy: function() {
                    console.log("买奶粉吗");
                }
            };
            var stu = new Student("安监局", 20);
            stu.stydy();
            console.dir(Student);
            console.dir(stu);
            console.log(Student);
        </script>

相关文章

  • 12.如何查找构造函数和原型的属性

    构造函数.prototype 查看构造函数的原型属性实例对象.ptoto 查看实例对象的构造函数的原型实例对象...

  • javascirpt复习

    实例中访问构造函数原型的指针,指向的是构造函数原型,不是构造函数; 所以重写构造函数原型对象,【实例对象】访问还是...

  • JS高级学习:构造函数/实例对象/原型

    对象创建的三种方式: 1.字面量方式2.调用系统的构造函数3.自定义构造函数 创建对象 实例化一个对象,的同时进行...

  • 原型链

    构造函数、原型、实例的关系 通过构造函数创建实例 每个构造函数都有一个原型对象 原型对象到包含一个指向构造函数的指...

  • 继承

    原型链 将一个构造函数的实例作为子构造函数的原型对象,这样,子构造函数的原型对象中会继承到父构造函数实例上的属性方...

  • javascript中面向对象编程-创建对象之原型模式

    理解名词:对象 原型对象 原型属性 函数 构造函数 实例 对象: Object,创建对象,对象属性方法原型对象:...

  • 理解prototype和__proto__以及construct

    在此例子中,对象实例a的__proto__指向其构造函数A的原型链prototype对象;js函数本身也是对象,构...

  • 总结构造函数和实例对象和原型对象之间的关系

    1、构造函数可以实例对象 2、构造函数中有一个属性叫prototype,是构造函数的原型对象。 3、构造函数的原型...

  • JS题目

    JS 1、原型/原型链/构造函数/实例/继承 1. proto(原型) 每个对象又有proto属性,指向创建他的构...

  • JavaScript原型链

    原型链主要是实例对象和构造函数之间的关系,而基本上所有的js对象都有构造函数,而构造函数又是一个特殊的对象。 Ja...

网友评论

    本文标题:JS高级学习:构造函数/实例对象/原型

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