首页 > Web开发 > 详细

对js原型对象、实例化对象及prototype属性的一些见解

时间:2019-09-26 18:25:13      阅读:93      评论:0      收藏:0      [点我收藏+]

什么是原型对象?

请看下面的代码,我们以各种姿势,创建了几个方法!

 function fn1() {
    }
    var fn2 = function () {
    }
    var fn3 = new Function()

    console.log(typeof fn1) //function
    console.log(typeof fn2) //function
    console.log(typeof fn3)  //function

    console.dir(fn1) //如下图
    console.dir(fn2)//如下图
    console.dir(fn3)//如下图

 

 
技术分享图片
Snipaste_2019-07-06_20-15-51.png
得出结论~记住,重点
function 对象有一个prototype属性,使用new生成的对象就没有这个prototype属性。

(这里什么是proto,什么是原型链,我们放到后面再说,以防干扰思路)

那么原型对象有什么作用?

这里我们来复习一下自定义构造函数~

function Person(name, age) {
        this.name = name
        this.age = age
        this.eat = function () {
            console.log("吃饭")
        }
    }
    var per1 = new Person("小明", 18)
    var per2 = new Person("小红", 20)
   
    console.log(per1 === per2) //false
    per1.eat() //吃饭
    per2.eat() //吃饭
    console.log(per1.eat === per2.eat) //false

 

这里我使用自定义构造函数实例化了两个对象,可以看到,这两个对象的eat方法虽然功能相同,不是同一个方法!

得出结论~~~
自定义构造函数每次实例化出来的对象,构造函数都会创建一次,
所以eat方法在内存中创建了两次!他们在内存中的地址不同,所以不等!
但是因为它们的逻辑和功能一样,这样就导致了代码冗余,影响性能,所以这里就需要用到原型对象!

怎么使用原型及原型的作用

如下:

  function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.eat = function () { //将eat方法添加到Person的原型中
        console.log("恰饭")
    } 
    var per1 = new Person("小明", 18)
    var per2 = new Person("小红", 20)
    console.log(per1 === per2) //false
    console.log(per1.eat === per2.eat) //true
    per1.eat() //恰饭
    per2.eat() //恰饭

 

同样的配方,同样的味道,但不同的是:

通过原型添加的方法,可以完美的解决数据共享问题,从而节省了内存空间...

 

 

对js原型对象、实例化对象及prototype属性的一些见解

原文:https://www.cnblogs.com/itgezhu/p/11593403.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!