探究JavaScript原型数据共享与方法共享实现

2024-10-01 23:31:10

数据共享

什么样子的数据是需要写在原型中?

需要共享的数据就可以写原型中

原型的作用之一：数据共享

属性需要共享,方法也需要共享：

不需要共享的数据写在构造函数中
需要共享的数据写在原型中

下面我们看一个案例

数据共享案例

每个学生的名字，年龄，性别都是独特的，我们要设置

所有学生的身高都是188,所有人的体重都是55
所有学生都要每天写500行代码
所有学生每天都要吃一个10斤的西瓜

就可以把共有数据写到原型中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    function Student(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    // 所有学生的身高都是188,所有人的体重都是55
    // 所有学生都要每天写500行代码
    // 所有学生每天都要吃一个10斤的西瓜
    //原型对象

    Student.prototype.height="188";
    Student.prototype.weight="55kg";
    Student.prototype.study=function () {
      console.log("学习,写500行代码,小菜一碟");
    };
    Student.prototype.eat=function () {
      console.log("吃一个10斤的西瓜");
    };
    //实例化对象,并初始化
    var stu=new Student("晨光",57,"女");
    console.dir(Student);
    console.dir(stu);

//    stu.eat();
//    stu.study();

  </script>
</head>
<body>

</body>
</html>

打印出来是这样的

原型简单写法

原型还有一种更简单的方法，下面是对上面案例的修改

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    //简单的原型写法
    Student.prototype = {
      //手动修改构造器的指向
      constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("学习好开心啊");
      },
      eat: function () {
        console.log("我要吃好吃的");
      }
    };

    var stu=new Student("鼎鼎大名",20,"男");
    stu.eat();
    stu.study();
    console.dir(Student);
    console.dir(stu);

  </script>
</head>
<body>

</body>
</html>

原型方法共享

例如设定方法，吃完了玩，玩完了睡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //原型中的方法,是可以相互访问的

    function Animal(name,age) {
      this.name=name;
      this.age=age;
    }
    //原型中添加方法
    // 吃完了就玩
    Animal.prototype.eat=function () {
      console.log("动物吃东西");
      this.play();
    };
    // 玩完了就睡
    Animal.prototype.play=function () {
      console.log("玩球");
      this.sleep();
    };
    Animal.prototype.sleep=function () {
      console.log("睡觉了");
    };

    var dog=new Animal("小苏",20);
    dog.eat();

    //原型对象中的方法,可以相互调用

  </script>
</head>
<body>

</body>
</html>

到此这篇关于探究JavaScript原型数据共享与方法共享实现的文章就介绍到这了,更多相关探究JavaScript原型数据共享与方法共享内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

深入浅析JavaScript中数据共享和数据传递

数据共享和数据传递是相辅相成的,我们一起来讨论这个问题.首先要说的是共享和传递都是有作用域的.作用域就是起作用的区域,在同一个作用域数据可以共享,超过这个作用域就是跨作用域,就得用到数据传递了. 作用域 1.ui作用域每一个ui文件缺省都有对应的ui.js.他们作为一个闭合的作用域.ui.js里根据ui文件里组件的id来获取ui对象;不同的ui文件可以定义相同id的组件.在ui.js里定义的变量只能在这个js里访问. 2.page作用域每次调用openPage都会打开一个新的page,这个新
js创建数据共享接口——简化框架之间相互传值

很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码: 复制代码代码如下: window.parent.document.getElementById("main") .contentWindow.document.getElementById('input').value = document.getElementById('myIframe') .contentWindow.document.getElementById('s0').value; 其实这个问题可
JavaScript iframe数据共享接口实现方法

在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情,如果我们能够写一个一劳永逸的接口那就再方便不过了,下面就来简答介绍一下如何实现此功能.原理就是将数据缓存早window.top这个窗口,这样无论子窗口父窗口的层次如何变化,数据总是存在不会变化的. 代码如下: var share={ data:function(name,value){ var top=window.top, cache=top['_CACHE']||{}; top['_CACHE']=cache; return val
Javascript与vbscript数据共享

如有纰漏之处,请指出,谢谢 1.普通全局变量在browser里,引用一个全局变量,可以有很多方法,你可以直接引用该变量,也可以用window.variable来引用全局变量,原因是因为全局变量属于window的窗体,但是当每新开一个窗口,浏览器会自动清空先前已有变量(也就是说,每个新开页面都是一个"有清白之身的web页",因此在新开的窗口里是不可以引用之前定义的变量,如果要引用,可以变向获取,如通过URL的参数传递等方法来获取,但这是后话了)如: <script> var
探究JavaScript原型数据共享与方法共享实现

数据共享什么样子的数据是需要写在原型中? 需要共享的数据就可以写原型中原型的作用之一:数据共享属性需要共享,方法也需要共享: 不需要共享的数据写在构造函数中需要共享的数据写在原型中下面我们看一个案例数据共享案例每个学生的名字,年龄,性别都是独特的,我们要设置所有学生的身高都是188,所有人的体重都是55 所有学生都要每天写500行代码所有学生每天都要吃一个10斤的西瓜就可以把共有数据写到原型中 <!DOCTYPE html> <html lang="en&q
微信小程序如何实现数据共享与方法共享详解

目录全局数据共享 Mobox npm安装及其注意事项小程序对 npm 的支持与限制 npm 依赖包的安装与使用 Mobox 组件方法共享 behaviors 1. 什么是 behaviors 2. behaviors 的工作方式 3. 创建 behavior 4. 导入并使用 behavior 5. behavior 中所有可用的节点 6. 同名字段的覆盖和组合规则总结全局数据共享 Mobox 原生小程序开发中我们可以通过 mobx-miniprogram 配合 mobx-minipro
JavaScript原型与原型链深入探究使用方法

目录原型(prototype) 显示原型与隐式原型原型链原型链属性问题原型链 instanceof 使用练习原型(prototype) 每一个函数都有一个 prototype 属性,它默认指向一个Object空对象(即称为:原型对象). <script> console.log(Date.prototype, typeof Date.prototype); function fun(){ } fun.prototype.test = function(){ //给原型对象添加一个方
JavaScript原型链及常见的继承方法

目录原型链原型链的概念原型链的问题几种常见的继承方法盗用构造函数组合继承原型式继承寄生式继承寄生组合式继承原型链原型链的概念在JavaScript中,每一个构造函数都有一个原型,这个原型中有一个属性constructor会再次指回这个构造函数,这个构造函数所创造的实例对象,会有一个指针(也就是我们说的隐式原型__proto__或者是浏览器中显示的[[Prototype]])指向这个构造函数的原型对象.如果说该构造函数的原型对象也是由另外一个构造函数所创造的实例,那么该构造
探究Javascript模板引擎mustache.js使用方法

我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法. 简单示例 function show(t) { $("#content").html(t); } var view = { title: 'YZF', cacl: function () { return 6 + 4; } }; $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view
再谈javascript原型继承

真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型与原型链说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础. 在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的
javascript原型模式用法实例详解

本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客
深入理解javascript原型链和继承

在上一篇文章中,介绍了原型的概念,了解到在javascript中构造函数.原型对象.实例三个好基友之间的关系:每一个构造函数都有一个"守护神"--原型对象,原型对象心里面也存着一个构造函数的"位置",两情相悦,而实例呢却又"暗恋"着原型对象,她也在心里留存了一个原型对象的位置. javascript本身不是面向对象的语言,而是基于对象的语言,对于习惯了其他OO语言的人来说,起初有些不适应,因为在这里没有"类"的概念,或者说&q
JavaScript原型对象、构造函数和实例对象功能与用法详解

本文实例讲述了JavaScript原型对象.构造函数和实例对象功能与用法.分享给大家供大家参考,具体如下: 大家都知道,javascript中其实并没有类的概念.但是,用构造函数跟原型对象却可以模拟类的实现.在这里,就先很不严谨的使用类这个词,以方便说明. 下面整理了一些关于javascript的构造函数.原型对象以及实例对象的笔记,有错误的地方,望指正. 先用一张图简单的概括下这几者之间的关系,再细化: 构造函数和实例对象构造函数是类的外在表现,构造函数的名字通常用作类名. 其实构造函数也就
JavaScript原型链与继承操作实例总结

本文实例讲述了JavaScript原型链与继承操作.分享给大家供大家参考,具体如下: 1. JavaScript继承 JavaScript继承可以说是发生在对象与对象之间,而原型链则是实现继承的主要方法: 1.1 原型链利用原型让一引用类型继承另一个引用类型的属性和方法. 构造函数中有个prototype(每个函数中都有),指向他的原型对象,每个原型对象中也有一个constructor属性,指向原构造函数.通过构造函数创建的新对象中都有一个无法直接访问的[[proto]]属性,使得对象也指向构