美文网首页
关于构造函数中this和prototype定义的属性和方法的不同

关于构造函数中this和prototype定义的属性和方法的不同

作者: 一个想学仙术的菜鸟仔 | 来源:发表于2020-11-17 10:35 被阅读0次

this定义的属性和方法,是生成的每个实例有属于自己的属性和方法;

prototype定义的属性和方法,是每个实例共同拥有一份构造函的引用属性和方法;

  • this定义
function Admin(food) {
   this.food = food || "米饭";
   this.arrList = [];
   this.eat = function () {
       console.log("吃点"+this.food)
   }
 }

 let son1 = new Admin("香蕉");
 let son2 = new Admin("苹果");

 console.log(son1.food);  
 son1.eat(); // 吃点香蕉
 son1.arrList.push(1);
 console.log(son1.arrList); // [1]

 console.log(son2.food);
 son2.eat();  // 吃点苹果
 son2.arrList.push(2);
 console.log(son2.arrList); // [2]
  

*prototype

function Admin() {
}

Admin.prototype.food= "";
Admin.prototype.arrList= [];
Admin.prototype.eat = function () {
    console.log("吃点"+this.food)
}

let son1 = new Admin();
let son2 = new Admin();

son1.food = "香蕉";
son1.eat(); // 吃点香蕉
son1.arrList.push(1);
console.log(son1.arrList); // [1]

son2.eat(); // 吃点
son2.food = "苹果";
son2.eat(); // 吃点苹果
son2.arrList.push(2);
console.log(son2.arrList); // [1,2]

由上可以看出this是实例自己独有的,而prototype中属性为引用数据类型是所有实例共有的;

相关文章

  • 关于构造函数中this和prototype定义的属性和方法的不同

    this定义的属性和方法,是生成的每个实例有属于自己的属性和方法; prototype定义的属性和方法,是每个实例...

  • 原型、this指向

    原型【构造函数】 首字母大写,他里面定义了各种需要共享的属性和方法。构造函数里面有prototype属性,是个指针...

  • 原型链继承

    构造函数的prototype属性 实例和构造函数和原型父构造函数的实例作为子构造函数prototype属性,则实现...

  • ES6中set和map数据结构的操作方法

    set的属性和方法: 属性: Set.prototype.constructor:构造函数,默认就是Set函数。 ...

  • 浅谈javaScript继承

    原型和构造函数 prototype属性对Object添加属性和方法 构造函数实例化过程 原型和继承 简单继承 继承

  • this

    this,用于定义构造函数中的属性和方法,注意构造函数不可以使用箭头函数定义,因为箭头函数中没有this,如果使用...

  • 构造函数ES5和ES6对比

    封装: 1、通过构造函数添加属性和方法(即:通过this定义属性和方法) 缺点:通过this定义的属性和方法,我们...

  • function 函数类型之prototype

    prototype 和 length 函数的属性和方法 ECMAScript 中函数是对象,因此也有属性和方法。每...

  • prototype和__proto__

    prototype两种使用方法 prototype和proto 对象的原型属性(proto)指向构造函数的原型(p...

  • JavaScript原型,构造函数

    构造函数(可以用来创建大量相同属性和方法的对象,和类相似): 原型: 每一个构造函数都有prototype(原型)...

网友评论

      本文标题:关于构造函数中this和prototype定义的属性和方法的不同

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