javascript 静态对象和构造函数的使用和公私问题

yizhihongxing

JavaScript中的对象包括静态对象和实例对象,其中静态对象是通过构造函数定义的属性和方法的集合,可以通过构造函数名直接访问,而实例对象则是由构造函数实例化出来的。在 JavaScript 中,对象可以拥有公共方法和私有方法,公共方法可由对象直接访问,私有方法只能在构造函数内部使用。

静态对象使用

在 JavaScript 中,我们可以使用构造函数来定义静态对象。静态对象可以存储在构造函数本身的静态属性中,也可以在prototype原型链中定义静态方法,因为prototype是所有实例化对象所共享的。

// 构造函数定义静态对象属性
function Dog(name, breed) {
  Dog.count++;
  this.name = name;
  this.breed = breed;
}
Dog.count = 0;

// 原型链定义静态方法
Dog.prototype.bark = function() {
  console.log("Woof!");
}

当需要创建多个相同类型的实例对象时,可以通过构造函数实例化多个对象,并将它们的属性和方法存储在各自的实例对象中:

var myDog1 = new Dog("Buddy", "Golden Retriever");
var myDog2 = new Dog("Sadie", "Border Collie");

console.log(myDog1.name); // Buddy
console.log(myDog2.breed); // Border Collie

myDog1.bark(); // Woof!
myDog2.bark(); // Woof!

构造函数的公私问题

构造函数中定义的方法和属性有公共和私有之分。公共方法可以在外部访问,而私有方法只能在构造函数内部访问。

公共方法

公共方法可以通过原型链挂载到构造函数上,不同的实例对象都可以共享这些方法。例如,下面的例子中,公共方法bark可以在所有实例对象上调用:

function Dog(name, breed) {
  this.name = name;
  this.breed = breed;
}

Dog.prototype.bark = function() {
  console.log("Woof!");
}

var myDog = new Dog("Buddy", "Golden Retriever");
myDog.bark(); // 输出 Woof!

私有方法

私有方法只能在构造函数内部访问,不能被外部访问。例如,下面的例子中,私有方法woofer只能在Dog构造函数内部调用:

function Dog(name, breed) {
  this.name = name;
  this.breed = breed;

  // 私有方法
  function woofer() {
    console.log("Woofer!");
  }
}

var myDog = new Dog("Buddy", "Golden Retriever");
myDog.woofer(); // TypeError: myDog.woofer is not a function

示例说明

示例1

我们可以创建一个静态对象MathUtils,来存储一些与数学相关的公共方法和属性。这样只需在定义好的MathUtils对象上调用方法即可,无需每次要使用这些公共方法和属性时都要定义新的对象。

// 静态对象使用示例
var MathUtils = {};

MathUtils.factorial = function(n) {
  if (n === 0) {
    return 1;
  }
  else {
    return n * MathUtils.factorial(n-1);
  }
}

console.log(MathUtils.factorial(5)); // 120

示例2

在构造函数内部,可以在闭包中定义私有方法。这些方法只能在构造函数内部访问。

// 构造函数公私问题示例
function Person(name) {
  this.name = name;

  // 私有方法
  var greet = function() {
    console.log("Hello, my name is " + name);
  }

  // 公共方法
  this.sayHello = function() {
    greet();
  }
}

var peter = new Person("Peter");
peter.sayHello(); // Hello, my name is Peter

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript 静态对象和构造函数的使用和公私问题 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 使用Vue实现移动端左滑删除效果附源码

    针对“使用Vue实现移动端左滑删除效果附源码”,我可以提供以下完整攻略。 前置知识 实现该功能需要具备以下基础知识: Vue.js基本语法 移动端touch事件基本知识 CSS3动画基本知识 实现步骤 第一步:实现左滑效果 首先,我们需要实现左滑效果。我们可以使用CSS3的transition或animation属性实现。 以使用transition为例,我…

    JavaScript 2023年6月11日
    00
  • javascript实现将数字转成千分位的方法小结【5种方式】

    下面是讲解“JavaScript实现将数字转成千分位的方法小结【5种方式】”的完整攻略。 什么是千分位? 千分位是指将数字每隔三位加一个逗号表示的形式,比如:“1,234,567”。 为什么要使用千分位? 使用千分位可以使数字更加易读,尤其是对于大的数字更加方便观察。 实现方式 以下是五种JavaScript实现将数字转成千分位的方法: 方法一:toFixe…

    JavaScript 2023年5月28日
    00
  • 一个前端大佬的十年回顾 | 漫画前端的前世今生

    作者:京东科技 胡骏 引言 岁月如梭,十载流年 前端技术,蓬勃向前 HTML,CSS,JavaScript 演绎出璀璨夺目的技术画卷 回到十年前,前端技术就像一名戴着厚重眼镜的书呆子,总是小心翼翼,被各种各样的浏览器兼容性问题欺负(就像在小学被欺负一样)。 但随着时间的推移,这个书呆子开始锻炼,变得越来越强壮,终于能够对抗那些讨厌的兼容性问题 进入中学时期,…

    JavaScript 2023年4月17日
    00
  • JavaScript中的Function函数

    下面是关于JavaScript中的Function函数的完整攻略: 1. Function函数概述 Function函数是JavaScript中最基本的一种类型,使用Function函数可以将代码封装成一个可重复使用的函数,在代码执行时可以多次调用,从而提高代码的灵活性和复用性。一个Function函数实际上是一个对象,有具体的属性和方法供我们调用,同时也可…

    JavaScript 2023年5月27日
    00
  • Vue中设置登录验证拦截功能的思路详解

    下面我将详细介绍“Vue中设置登录验证拦截功能的思路详解”的完整攻略。 1. 登录验证拦截的基本原理 在Vue项目中实现登录验证拦截的基本原理是使用Vue Router的导航守卫(Navigation Guards)功能。导航守卫可以用来在路由变化前获取用户信息,进行权限控制,从而实现路由的拦截。导航守卫有三种类型:全局导航、路由独享守卫和组件内的守卫。 在…

    JavaScript 2023年6月11日
    00
  • JS实现把一个页面层数据传递到另一个页面的两种方式

    JS 实现把一个页面层数据传递到另一个页面主要有两种方式:URL参数传递和 localStorage 本地存储。 URL 参数传递 URL 参数传递是将要传递的数据拼接在 URL 中,通过 URL 传递给另一个页面。这种方式简单,易于实现,适用于传递少量数据。下面提供一个使用 URL 参数传递的示例: 发送页面: const name = "Ali…

    JavaScript 2023年6月11日
    00
  • jQuery验证插件validation使用指南

    jQuery验证插件validation使用指南 jQuery验证插件validation是一款简单易用的表单验证插件,可以有效地满足开发人员对于表单的验证需求。 安装 <!– 引入 jQuery –> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.j…

    JavaScript 2023年6月10日
    00
  • JavaScript String 对象常用方法详解

    下面我来详细讲解一下 JavaScript String 对象常用方法。 一、JavaScript String 对象简介 JavaScript 中的 String 对象,用于处理文本(字符串)数据。它包含了许多实用的方法,可以完成字符串的拼接、截取、检索、替换等操作。 二、JavaScript String 对象常用方法详解 下面是 JavaScript …

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部