美文网首页
1-3.1原型

1-3.1原型

作者: 大庆无疆 | 来源:发表于2019-03-03 23:56 被阅读0次

function()也会在内存中存储

// 我们先写一个构造函数
function Student(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function () {
        console.log('大家好,我是' + this.name);
    }
}

// 创建对象
var stu1 = new Student('zs', 22);
var stu2 = new Student('ls', 99);
stu1.sayHi();//输出:大家好,我是zs
stu2.sayHi();//输出:大家好,我是ls

在上面我们创建了两个对象,并且调用了sayHi方法。
其实在内存中,以这种方式创建方法,每当我们创建一个对象的时候,除了在内存中开辟一块内存给创建的对象,也会开辟一块内存给sayHi的function,然后让sayHi指向那个function。
所以上面我们不但开辟了两块内存给对象,也开辟了两块内存给sayHi的function(这样会影响效率,并且消耗内存)
console.log(stu1.sayHi === stu2.sayHi);//前面我们说了他们会开辟不同的内存,所以这里是false

// 解决上述问题
// 1、prototype:原型(每个构造函数都有的一个属性,叫原型,因为这个属性是个对象,所以也叫原型对象)
// 因为原型也是对象,所以我们可以给原型添加属性和方法
// 原型是构造函数的,所以原型里的属性和方法通过构造函数创建出来的对象都可以访问

// 现在我们给Student的原型增加sayHello方法
Student.prototype.sayHello = function () {
    console.log('大家好,我的年龄是' + this.age);
}
// 通过对象访问,不加prototype
stu1.sayHello();//大家好,我的年龄是22
stu2.sayHello();//大家好,我的年龄是99
console.log(stu1.sayHello === stu2.sayHello);//返回true

//------------------------------------------------------------------
2-1对象的__proto__
console.dir(stu1);
我们打现在印了stu1对象,展开后发现里面没有sayHello方法,但是有一个“__proto__”,他指向的就是Student.prototype(对象的__proto__ 等于 构造函数的Student.prototype)
当调用对象的属性或者方法的时候,先去找对象本身的属性/方法 ,如果对象没有该属性或者方法。此时去调用原型中的属性或方法
如果对象本身没有该属性/方法,原型中也没有该属性或者方法,此时会报错

2-2在原型对象中有一个属性:constructor
//constructor属性指向的就是构造函数。
// 作用是记录了创建该对象的构造函数,比如我们想知道stu1对象的具体类型,除了使用instanceof来判断,也可以使用constructor来判断,如:
console.log(stu1.constructor === Student);//返回true

相关文章

  • 1-3.1原型

    function()也会在内存中存储

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • JavaScript 原型和原型链

    原型 在 JavaScript 中,我们所称的原型有两个使用语境: 原型关系 原型属性 原型关系指对象的原型对象,...

  • JavaScript 原型和原型链

    原型 在 JavaScript 中,我们所称的原型有两个使用语境: 原型关系 原型属性 原型关系指对象的原型对象,...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • js的原型对象&原型链&js的继承

    原型对象 & 原型链 原型对象分2种:显式原型和隐式原型。 显式原型就是我们常用的prototype属性,是函数的...

  • 4.4 JavaScript

    4.4.1. 原型链 4.4.1.1. 显式原型和隐式原型   JavaScript的原型分为显式原型(expli...

  • 原型、原型链

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

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

网友评论

      本文标题:1-3.1原型

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