浅谈js构造函数的方法与原型prototype

把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法。

•函数内的方法： 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法.

•prototype上的方法： 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的内存占用就比较小.

•在实际的应用中，这两种方法往往是结合使用的；所以我们要首先了解我们需要的是什么，然后再去选择如何使用

// 构造函数A
function A(name) {
  this.name = name || 'a';
  this.sayHello = function() {
    console.log('Hello, my name is: ' + this.name);
  }
}

// 构造函数B
function B(name) {
  this.name = name || 'b';
}
B.prototype.sayHello = function() {
  console.log('Hello, my name is: ' + this.name);
};

var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello();
a2.sayHello();

var b1 = new B('b1');
var b2 = new B('b2');
b1.sayHello();
b2.sayHello();

写了两个构造函数,第一个是A,这个构造函数里面包含了一个方法sayHello;第二个是构造函数B, 我们把那个方法sayHello写在了构造函数B的prototype属性上面.把方法写在构造函数的内部,增加了通过构造函数初始化一个对象的成本,把方法写在prototype属性上就有效的减少了这种成本. 你也许会觉得,调用对象上的方法要比调用它的原型链上的方法快得多,其实并不是这样的,如果你的那个对象上面不是有很多的原型的话,它们的速度其实是差不多的

另外，需要注意的一些地方：

•首先如果是在函数的prototype属性上定义方法的话,要牢记一点,如果你改变某个方法,那么由这个构造函数产生的所有对象的那个方法都会被改变.

•还有一点就是变量提升的问题,我们可以稍微的看一下下面的代码:

func1(); // 这里会报错,因为在函数执行的时候,func1还没有被赋值. error: func1 is not a function
var func1 = function() {
  console.log('func1');
};

func2(); // 这个会被正确执行,因为函数的声明会被提升.
function func2() {
  console.log('func2');
}

•关于对象序列化的问题.定义在函数的prototype上的属性不会被序列化,可以看下面的代码：

function A(name) {
  this.name = name;
}
A.prototype.sayWhat = 'say what...';

var a = new A('dreamapple');
console.log(JSON.stringify(a));

我们可以看到输出结果是{"name":"dreamapple"}

以上这篇浅谈js构造函数的方法与原型prototype就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解JS构造函数中this和return

    先看一段代码, function Foo(name,age){ this.name=name; this.age=age; } var foo=new Foo("Tom",14); foo.name;//Tom foo.age;//14 使用构造函数实例化发生的流程: 1.建立一个foo的空对象. 2.将构造函数中的Foo的this指向对象foo. 3.foo的_proto_属性指向Foo函数的prototype原型. 4.执行构造函数中的代码. 相对于普通函数,构造函数中的this是

  • JavaScript精炼之构造函数 Constructor及Constructor属性详解

    JavaScript精炼之构造函数 Constructor及Constructor属性详解

    除了创建对象,构造函数(constructor) 还做了另一件有用的事情-自动为创建的新对象设置了原型对象(prototype object) .原型对象存放于 ConstructorFunction.prototype 属性中. 例如,我们重写之前例子,使用构造函数创建对象"b"和"c",那么对象"a"则扮演了"Foo.prototype"这个角色: // 构造函数 function Foo(y) { // 构造函数将会以特

  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

    在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

  • JS构造函数与原型prototype的区别介绍

    构造函数方法很好用,但是存在一个浪费内存 通过原型法分配的函数是所有对象共享的. 通过原型法分配的属性是独立.-----如果你不修改属性,他们是共享 如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函数,这样比较节省内存. 例子: //----构造函数模式 为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠).那么,原型对象Cat就变成了下面这样: <script> function Cat(name, color) { this.n

  • JavaScript构造函数详解

    JavaScript构造函数详解

    构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型. 3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回.如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回. function Person( name){ this

  • 浅谈js构造函数的方法与原型prototype

    把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法. •函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法. •prototype上的方法: 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的

  • 浅谈JS继承_借用构造函数 & 组合式继承

    2.借用构造函数 为解决原型中包含引用类型值所带来的问题, 我们使用一种叫做 借用构造函数(constructor stealing)的技术(又叫伪造对象或经典继承). 这种技术的基本思想:在子类构造函数内部调用超类型构造函数. 通过使用apply()和call()方法可以在新创建的子类对象上执行构造函数. function SuperType(){ this.colors = ["red", "blue", "green"]; } functi

  • 浅谈JS的原型和原型链

    浅谈JS的原型和原型链

    1.原型prototype javascript中所有函数都具有这个属性,所有具有prototype属性的对象都是一个函数.prototype的作用是向对象添加一个方法/属性. function persion(){} persion.prototype.name = "xiaoming" console.log(persion.prototype)//{name: "xiaoming", constructor: ƒ} 2.原型指针:__proto__ 如果将上面

  • 浅谈js函数的多种定义方法与区别

    定义一个函数一般有如下三种方式: 1.函数关键字(function)语句: function fnMethodName(x){ alert(x); } 2.函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} 3.Function()构造函数: var fnMethodName = new Function('x', 'alert(x);') 上面三种方法定义了同一个方法函数fnMethodName,第1种就是最常

  • 浅谈JS中的bind方法与函数柯里化

    绑定函数bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.不同于call和apply只是单纯地设置this的值后传参,它还会将所有传入bind()方法中的实参(第一个参数之后的参数)与this一起绑定. 关于这个特性看<JS权威指南>原文的例子: var sum = function(x,y) { return x + y }; var succ = sum.bind(null, 1); //让this指向null,其后的实参也会作为实参传入被绑定的函数sum

  • 浅谈JS对象添加getter与setter的5种方法

    定义 getter 与 setter 1.通过对象初始化器在创建对象的时候指明(也可以称为通过字面值创建对象时声明) (function () { var o = { a : 7, get b(){return this.a +1;},//通过 get,set的 b,c方法间接性修改 a 属性 set c(x){this.a = x/2} }; console.log(o.a); console.log(o.b); o.c = 50; console.log(o.a); })(); 在 chro

  • 浅谈js中子页面父页面方法 变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名 window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 例如:想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById(&q

  • 浅谈js控制li标签排序问题 js调用php函数的方法

    浅谈js控制li标签排序问题 js调用php函数的方法

    [Html代码] <span style="font-size:14px;"><ul class="list-group"> <? if ($categorys): ?> <? foreach ($categorys as $category):?> <li class="list-group-item" data-id="<? echo $category->id ?&

  • 浅谈js常用内置方法和对象

    JS内置函数不从属于任何对象,在JS语句的任何地方都可以直接使用这些函数.JS中常用的内置函数如下: 1.eval(str)接收一个字符串形式的表达式,并试图求出表达式的值.作为参数的表达式可以采用任何合法的操作符和常数.如果参数中包含JS命令,这些命令也可以被执行,就像这些命令是JS程序的一部分一样. 2.parseInt(str,n)试图从一个字符串中提取一个整数.可附加一个n整数实现返回n进制整数.如果在字符串中存在除了数字.符号.小数点和指数符号以外的字符,就停止转换,返回已有的结果.如

  • 浅谈js中StringBuffer类的实现方法及使用

    如下所示: <strong>JAVA中有一个StringBuffer类,js中却没有下面来自己实现一个简单的js的StringBuffer类.</strong> //创建一个StringBuffer类 ,此类有两个方法:一个是append方法一个是toString方法 function StringBuffer() { this.__strings__ = []; }; StringBuffer.prototype.append = function(str) { this.__s

随机推荐