JavaScript实现封装

最新推荐文章于 2024-12-29 13:02:42 发布

博勋

最新推荐文章于 2024-12-29 13:02:42 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/qq_31280709/article/details/52148634

Javascript 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了JavaScript中如何通过构造函数和原型链实现对象的封装与继承，对比了通过this和prototype添加属性方法的区别，并展示了如何实现私有及公有成员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上代码

//封装
var Book = function() {
  this.name = "js";
  this.title = ['one',"two"];
}
Book.prototype = {
  color : ['red',"yellow","black"],
  display : function() {
    console.log("this is a good book");
  }
};

说明：首先通过声明一个函数保存在变量里，在通过this绑定属性或方法。也可以通过原型prototype来添加属性和方法。通过原型来添加属性和方法有两种方式：

//1.一一为原型对象属性赋值
Book.prototype.display = function(){
  //code将一个对象赋值给类的原型对象
}
//2.
Book.prototype = {
  display : function(){
    //code
  }
}

接下来测试第一段代码

var book1 = new Book();
var book2 = new Book();
console.log(book1.color);//[ 'red', 'yellow', 'black' ]
console.log(book2.color);//[ 'red', 'yellow', 'black' ]
console.log(book1.title);//[ 'one', 'two' ]
console.log(book2.title);//[ 'one', 'two' ]

book1.color.push("book1");
book1.title.push("three");

console.log(book1.color);//[ 'red', 'yellow', 'black', 'book1' ]
console.log(book2.color);//[ 'red', 'yellow', 'black', 'book1' ]
console.log(book1.title);//[ 'one', 'two', 'three' ]
console.log(book2.title);//[ 'one', 'two' ]

book1.display();//this is a good book

比较this和prototype这两种方式的差异：通过this添加的属性方法是在当前对象上添加的，每次创建一个新对象时，this指向的属性和方法都会创建一次。而通过prototype继承的属性和方法是每个对象通过原型链prototype访问到的，每次通过类创建新对象时，这些属性和方法不会再次创建。

constructor属性：创建函数或者对象时，会为其创建原型对象prototype，而prototype对象又会像函数创建this属性一样创建constructor，this指向函数本身，constructor指向拥有整个原型对象的函数或对象。

对于类中一些属性和方法的隐藏和暴露，见如下代码：

var Book = funnction() {
  //私有属性
  var num = 1;
  //私有方法
  function checkId() {

  };
  //特权方法
  this.getName() = function () {}
  this.getPrice() = function () {}
  this.setName() = function () {}
  this.setPrice() = function () {}
  //对象公有属性
  this.id = id;
  //对象公有方法
  this.copy = function() {}
  //构造方法
  this.setName(name);
  this.setPrice(price);
}
//类静态共有属性、方法（对象不能访问）
Book.isChinese = true;
Book.resetTime = function () {
  console.log("new time");
}
Book.prototype = {
  //共有属性
  idJsbook : false,
  //公有方法
  display : function(){}
}

说明：1.由于javascript的函数级作用域，声明在函数内部的变量和方法，外部是访问不到的，-----> 私有属性和私有方法

2.函数内部通过this添加的属性和方法，再创建对象时，每个对象都会有一份,可以在外部访问。---->公有属性

通过this创建的方法，不但可以访问对象的公有属性和方法，还能访问对象的私有属性和方法，权利较大。---->特权方法

通过这些特权方法在创建时可以初始化对象的一些属性。---->构造方法

3.创建对象时，类外面通过点语法添加的属性和方法没有执行，新创建的对象无法访问，但是可以通过类来使用。---->类的静态公有属性、公有方法

4.通过prototype添加的属性和方法，在类创建的对象中可以访问。---->共有属性、公有方法