精华内容
下载资源
问答
  • js 对象方法(实例方法) 类方法 原型方法 function Animal() { //实例属性 this.name = name || 'Animal'; //实例方法 this.sleep = function () { console.log(this.name + "正在睡觉") } this....

    js 对象方法(实例方法) 类方法 原型方法

    function Animal() {
          //实例属性
          this.name = name || 'Animal';
          //实例方法
          this.sleep = function () {
            console.log(this.name + "正在睡觉")
          }
          this.play=function(play){
            console.log(this.name+'正在玩'+ play)
          }
        }
         //类方法
        Animal.eat = function (food) {
          console.log(food)
        }
        //原型方法
        Animal.prototype.play = function (play) {
          console.log(play)
        }
    
        //test1 类调用方法
        Animal.eat('food')//food  可以调用类方法
        console.log(Animal.name)//Animal 可以调用实例属性
        Animal.play('warter') //not a function 不能调用原型方法
         Animal.sleep()//not a function  不能调用实例方法
    
        //test2 new实例化后调用方法
        let Cat = new Animal();
        console.log(Cat.name) //Animal 可以调用实例属性
        Cat.play('warter') //可以调用原型方法(实例方法会覆盖原型方法  优先级高于原型)
        Cat.sleep() //可以调用实例方法
        Cat.eat('food') //不可以调用类方法
    

    自我总结:

    1. 写在原型中的方法可以被所有的实例共享, 实例化的时候不会在实例内存中再复制一份,占有的内存消耗少。
    2. js中每个函数都有一个prototype属性,这个属性指向一个对象(所有属性的集合:默认constructor属性,值指向这个函数本身。)
    3. 每个原型对象都属于对象,所以它也有自己的原型,而它自己的原型对象又有自己的原型,所以就形成了原型链。
    4. 一个对象的隐式原型指向构造这个对象的构造函数的显式原型,所以这个对象可以访问构造函数的属性和方法。(new一个实例)
    5. js的继承也就是通过原型链来实现的,当访问一个对象的属性,如果这个对象本身不存在,则沿着__proto__依次往上查找,如果有则返回值,没有则一直到查到Object.prototype的__proto__的值为null.

    console.log(Cat.proto.proto.proto)//null
    Cat.__proto__等于Animal.prototype ,
    Animal.prototype.__proto__等于Object.prototype.

    展开全文
  • function People(name){ this.name=name; //对象方法 this.Introduce=function(){ alert("My name is "+this.name); } } //类方法 People.Run=function(){ ...//原型方法 People.prototype.IntroduceChinese...

    function People(name){
    this.name=name;
    //对象方法
    this.Introduce=function(){
    alert("My name is "+this.name);
    }
    }
    //类方法
    People.Run=function(){
    alert(“I can run”);
    }
    //原型方法
    People.prototype.IntroduceChinese=function(){
    alert(“我的名字是”+this.name);
    }
    var p1=new People(“Windking”);
    p1.Introduce(); //对象方法需要通过实例化对象去调用
    People.Run(); //类方法不需要通过实例化对象去调用
    p1.IntroduceChinese(); //原型方法也需要通过实例化对象去调用

    对象方法:构造函数中的方法以及构造函数原型上面的方法,实例化后才可以使用
    类方法:类就是一个函数,在js中由于函数也是一个对象,所以可以为函数添加属性以及方法。
    原型方法:在对象实例话的时候只给对象方法分配内存,而原型方法不需要内存,对性能优化有好处。

    展开全文
  • 静态方法,实例方法,原型方法的区别基础知识区别验证 基础知识 静态方法和实例方法的定义 A static method (or static function) is a method defined as a member of an object but is accessible directly from an ...

    静态方法,实例方法,原型方法的区别

    基础知识

    静态方法和实例方法的定义

    A static method (or static function) is a method defined as a member of an object but is accessible directly from an API object's constructor, rather than from an object instance created via the constructor.
    静态方法(或静态函数)是定义为对象成员的方法,但可以直接从API对象的构造函数访问,而不是通过构造函数创建的对象实例访问。
    Methods called on object instances are called instance methods.
    在对象实例上调用的方法称为实例方法。
    

    内容取自MDN,点击跳转连接

    区别

    三种方法的区别主要在于

    1.是否可以被构造函数和实例对象调用

    方法类别 是否可以被 构造函数 调用 是否可以被 实例化对象 调用
    静态方法 可以 不可以
    实例方法 不可以 可以
    原型方法 不可以 可以

    2.内存空间分配情况(待验证)

    Q:跟后台同时沟通 java 中的静态方法和实例方法有内存分配的区别,前端暂时没有找到官方资料支持,待验证,以下是结论
    静态方法随构造函数一同生成,存放集中
    实例方法随实例化对象生成产生,存放较为离散

    验证

    // 初始化构造函数
     const Parent = function() {
     	// 添加实例方法
    	this.instanceFunc = function() {
    	  console.log('可以访问实例方法');
    	}
    }
    // 添加静态方法
     Parent.staticFunction = function() {
        console.log('可以访问静态方法');
     }
     // 添加原型方法
     Parent.prototype.protoFunc = function() {
        console.log('可以访问原型方法');
     }
     // 生成实例化对象
     const parent = new Parent()
     // 方法调用测试
     console.log('/* 静态方法测试 */');
     console.log('构造函数', Parent.staticFunction);
     console.log('实例化对象', parent.staticFunction);
     console.log('/* 实例方法测试 */');
     console.log('构造函数', Parent.instanceFunc);
     console.log('实例化对象', parent.instanceFunc);
     console.log('/* 原型方法测试 */');
     console.log('构造函数', Parent.protoFunc);
     console.log('实例化对象', parent.protoFunc);
     console.log(Parent.prototype);
    

    在这里插入图片描述

    展开全文
  • 之前一直以为构造函数可以直接访问原型方法,是错的,现在说一下 实例方法 构造函数中this上添加的成员,在Cat构造方法里面,定义在this中的变量和方法,只有实例才能访问到:如this.name,this.move,this.eat这些都...

    背景

    之前一直以为构造函数可以直接访问原型方法,是错的,现在说一下

    实例方法

    构造函数中this上添加的成员 ,在Cat构造方法里面,定义在this中的变量和方法,只有实例才能访问到:如this.name,this.move,this.eat这些都是实例拥有,无法通过Cat直接调用。

    function Cat(name){
      this.name = name
      this.move = function() {
        console.log('移动')
      }
      this.eat = function() {
        console.log(`${this.name}爱吃鱼`)
      }
    }
    //给Cat构造函数添加静态方法
    Cat.eat = function() {console.log(`${this.name}爱吃鱼`)}
    let cat = new Cat('tom')
    Cat.eat()  //Cat爱吃鱼  //这是静态方法
    Cat.move() //Cat.move is not a function
    cat.eat()  //tom爱吃鱼  //这是实例方法
    cat.move()  //移动     //这是实例方法
    
    

    静态方法

    构造函数本身上添加的成员 

    下面的Cat.eat就是构造函数的静态方法,不能通过实例调用

    function Cat(name){
      this.move = function() {
       console.log(1)
      }
    }
    //直接定义在Cat构造函数中,实例不能调用
    Cat.eat = function() {console.log(`${this.name}爱吃鱼`)}
    构造函数调用
    Cat.eat()  //Cat爱吃鱼
    Cat.move()  //Cat.move is not a function
    let cat = new Cat()
    cat.eat()  //cat.eat is not a function
    

    原型方法

    原型中的方法实例和构造函数都可以访问到

    function Cat() {
    }
    Cat.eat = function() {
      console.log('静态方法')
    }
    Cat.prototype.eat = function() {
     console.log('原型方法')
    }
    let cat = new Cat()
    Cat.eat()  //静态方法
    Cat.prototype.eat()  //原型方法,不用prototype就是打印静态方法
    
    cat.eat()  //原型方法

    结论

    简而言之,实例方法就是只有实例可以调用,静态方法只有构造函数可以调用,原型方法是实例和构造函数都可以调用,是共享的方法。

    像Promise.all和Promise.race这些就是静态方法,Promise.prototype.then这些就是原型方法,new 出来的实例可以调用

    let promise = new Promise(function(resolve, rejected) {
                     resolve()
                  }) 
     promise.then()   //then是原型方法

     

    展开全文
  • 为jQ添加原型方法

    2020-03-23 15:32:33
    // 为$添加原型方法 $.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { ...
  • 深入理解Promise三大原型方法:Promise.prototype.then()、Promise.prototype.catch()、Promise.prototype.finally()
  • 原型与原型方法定义 原型指模拟某种最终产品的原始模型 原型方法指在获得一组基本需求后,通过快速分析构造出一个 小型的软件系统原型,满足用户的基本要求 用户通过使用原型系统,提出修改意见,从而减少用户与...
  • 1.概要1、对象方法理解就很简单了,主要是如果类生成一个实例,那么该实例就能使用该方法2、类方法,不需要通过生成实例就可以使用的方法3、原型方法主要是用来对JS已有的系统对象进行扩展而生的,例如Array数组没有...
  • JavaScript数组去重的原型方法

    千次阅读 2017-02-14 16:32:30
    本文主要说明两种原型方法来过滤数组中的重复元素。 方法一: 思路:1)构建一个新的数组存放结果;  2)for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比;  3)若结果数组中没有该元素,则存...
  • Javascript 中 对象概念 | 静态方法 | 原型方法 // 定义一个对象 function Person() {}Person.prototype.prototypeMethod = function() { console.log('prototypeMethod'); }View.staticMethod = function(){ ...
  • 原型方法

    千次阅读 2005-04-28 13:11:00
    原型方法论---关于软件原型方法若干问题的讨论撰写:Blueski日期:2003-3-14关键字:原型,尊重客户,原型评价,可视化,变更成本,开发团队蓝图1 引子太多了!终于签下合同-->得到了“正式”的客户提供的“需求书”...
  • 类的实现方式,ES6 的Class方式内部声明的方法,等同于function定义的原型方法//构造函数方法function A(name,age){this.name=name;this.age=age;}A.protype.test=function(){console.log('this is protype function...
  • function People(name) { this.name=name; //对象方法 this.Introduce=function(){ alert("My name is "+this.name); } } ...People.Run=function(){ ...//原型方法 People.prototype.IntroduceChines
  • http://www.link888.cn/index.php?load=read&id=500对Javascript来说,方法在... 构 造方法 和构造属性一样,它是分别存储于每个实例之中的,相互之间是完全独立。 原型方法 和原型属性一样,他是存储于原型中的,每
  • JavaScript中对象调用自身的原型方法

    千次阅读 2013-04-19 16:35:13
    //创建构造函数 function Foo(){ } //添加公有方法,即添加原型方法 ...创建Foo的实例后,实例可以直接调用原型方法 .bar(),但是对象Foo不能直接调用原型方法.bar()。 var f = new Foo('hello'); f.bar();// hello
  • 给Array本地对象增加一个原型方法

    千次阅读 2015-08-18 20:59:29
    笔试题:请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个仅包含被删除的重复条目的新数组。 给Array添加一个原型方法 Array.prototype.delRepeat=...
  • 原型方法论 ---关于软件原型方法若干问题的讨论 1 引子 太多了!终于签下合同-->得到了“正式”的客户提供的“需求书”的几片纸-->凭借自己的理解立即投入开发-->“木已成舟”,生米终于熬成粥-->用户拒绝接受?-->...
  • 每个对象都有原型,创建对象时可以选择对象的原型方法。 var stooge = { "first-name" : "Jerome",//属性名中如果包含非法的JS标识符或是JS保留字,必须用引号 ,反之可不用引号 "...
  • JavaScript调用原型方法

    2019-04-20 11:24:49
    定义在prototype的公有属性和方法,需要new一个实例之后才能使用。如: function Foo() { getName = function() { alert(1); } } Foo.prototype.getName = function(){ ...
  • vue原型方法封装

    千次阅读 2019-10-30 09:37:37
    util.js const getPathName = function () { var pathname = window.location.pathname.split('/').pop(); console.log('当前秒杀模块的路由为:',pathname); return pathname; } // const ...
  • 如题,今天特意测试了下类在执行constructor方法中是否可以使用其原型方法,测试文件内容如下: class Test { constructor() { const names = Object.getOwnPropertyNames(Test.prototype) console.log('names:'...
  • JavaScript之Object原型方法

    千次阅读 2017-07-15 12:36:56
    在JS 中,对象都是有原型的,甚至原型链。不过最终都是指向一个最初的原型,即 Object 对象的原型。那这个原型里都有啥呢?下面一起来看下,首先在浏览器控制台输入 {},我们知道这是创建一个对象。 从上面的图片...
  • [javascript] view plain copy function People(name) { this.name=name; //对象方法 this.Introduce=function(){ alert("My name is ... } } //类方法 People.Run=function(){ alert("I can
  • 原型的基本方法Javascript提供了原型的相关方法来获取或设置原型prototype,如下:(1)Object.create(proto[, descriptors]) :产生一个新的对象并设置proto为它的原型;(2)Object.getPrototypeOf(obj) :返回...
  • 原型方法给数组去重

    2018-05-10 14:41:38
    <!DOCTYPE html> <html lang="en"> <head&...原型去重</title> </head> <body> <script&
  • 工厂方法模式: 简单工厂模式的最大优点在于工厂类中包含了必要的逻辑判断根据客户端的选择条件动态实例化相关的类,对于客户端来说,去除了与具体产品的依赖。 工厂模式方法:定义一个用于创建对象的接口,让子类...
  • <html><br /><head><br /><title>JavaScript 对象方法 类方法 原型方法的区别;私有属性 公有属性 公有静态属性的区别</title><br /><script language="javascript" type="text/javascript" ><br />//定义...
  • 使用原型方法,可以容易地确定系统的性能,确认各项主要系统服务的可应用性,确认系统设计的可行性,确认系统作为产品的结果; 软件原型的最终版本,有的可以原封不动地成为产品,有的略加修改就可以成为最终系统的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,919
精华内容 15,167
关键字:

原型方法