js构造函数

一、js函数

  首先弄明白何为函数呢,按照犀牛书的说法,函数简单的说就是重复执行的代码块。函数是这样的一段JavaScript 代码,它只定义一次,但可能被执行或调用任意次。

  函数的定义方式:

    1.声明式函数定义: function  函数名 (){};这种定义方式,会将函数声明提升到该函数所在作用域的最开头,也是就无论你在这个函数的最小作用域的那儿使用这种方式声明的函数,在这个作用域内,你都可以调用这个函数为你所用。

    2.函数表达式:let fun = function(){}; 此方式定义的函数,只能在该作用域中,这段赋值代码执行之后才能通过fun()调用函数,否则,由于变量声明提升,fun === undefined。

    3.new Function 形式: var fun1 = new Function (arg1 , arg2 ,arg3 ,…, argN , body  );Function构造函数所有的参数都是字符串类型。除了最后一个参数, 其余的参数都作为生成函数的参数即形参。这里可以没有参数。最后一个参数, 表示的是要创建函数的函数体。

    总结:1 、第一种和第二种函数的定义的方式其实是第三种new Function 的语法糖,当我们定义函数时候都会通过 new Function 来创建一个函数,只是前两种为我们进行了封装,我们看不见了而已,js 中任意函数都是Function 的实例。2、ECMAScript 定义的 函数实际上是功能完整的对象。

二、构造函数

  定义:通过  new 函数名    来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分,主要从功能上进行区别的,构造函数的主要 功能为 初始化对象,特点是和new 一起使用。new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写(规范)。

  对new理解:new 申请内存, 创建对象,当调用new时,后台会隐式执行new Object()创建对象。所以,通过new创建的字符串、数字是值类型,而是非引用类型。

  1、常用的构造函数:

    1.    var arr = [];     为      var arr = new Array();       的语法糖。

    2.    var obj = {}     为      var obj = new Object();     的语法糖

    3. var  date = new Date();

    4.    ...

  2、执行构造函数时发生的事 : let f = new Foo();

      function Foo(name,age,sex){

        this.name = name;

        this.age = age;

        this.sex = sex;

      }

      Foo.prototype.belief = function(){

        console.log(‘量变是质变的必要准备,质变是量变积累到一定程度的必然结果!‘);

      }

      let f = new Foo (‘zh‘,18,‘男‘);

    a .  一个继承自 Foo.prototype 的新对象被创建。 let   f = {};   Foo.call(a);

    b.  f 继承 Foo的原型。    f.__proto__ = Foo.prototype;

    b   执行Foo函数,将name,age,sex 参数传入Foo中执行,此时函数内部this 为 new 创建的 f对象,所以  f.name = ‘zh‘;f.age = 18; f.sex = ‘男‘;

    c.  实例化对象完成,此时  f = {

                name:‘zh‘,

                age:18,

                sex:‘男‘

              }

    d.   f.belief();     打印‘量变是质变的必要准备,质变是量变积累到一定程度的必然结果!

三、ES6 中 class 与构造函数的关系

  class 为  构造函数的语法糖,即 class 的本质是 构造函数。class的继承 extends  本质 为构造函数的原型链的继承。

  例如:

  

   

   图一中通过class定义的类 和图二中通过构造函数定义的类 二者本质相同。并且在js执行时,会将第一种转会为第二种执行。所以 ES6 class的写法实质就是构造函数。

原文地址:https://www.cnblogs.com/honkerzh/p/10251739.html

时间: 2024-10-05 04:43:23

js构造函数的相关文章

谈谈JS构造函数

//构造函数 //使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法 //当对象被实例化后,构造函数会立即执行它所包含的任何代码 function myObject(msg) { //特权属性(公有属性) this.myMsg = msg; //只在被实例化后的实例中可调用 this.address = 'Chengdu'; //私有属性:无法通过对象直接访问 var name = 'Tirion'; var that = this; //私有方法 function sa

JS构造函数的用法和JS原型

$(function(){ //1 var rec = new Rectangle(5, 10); //alert(rec.width + "*" + rec.height + "=" + rec.area()); //alert(rec.hasOwnProperty("width")); //alert("area" in rec); //alert(rec.toString()); //2 var message = &q

JS中构造函数与普通函数的区别及JS构造函数、原型和实例的关系

JS中构造函数与普通函数的区别: https://www.cnblogs.com/cindy79/p/7245566.html JS构造函数.原型和实例的关系: https://blog.csdn.net/u012443286/article/details/78823955 JavaScript构造函数及原型对象: https://blog.csdn.net/a153375250/article/details/51083245 原文地址:https://www.cnblogs.com/jim

js 构造函数、原型继承

//定义所有飞行物的父类型的构造函数 function Flyer(fname,fspeed){ this.fname=fname; this.fspeed=fspeed; } Flyer.prototype.fly=function(){ //fly放在Flyer.prototype console.log(this.fname+"以"+this.fspeed+"速度飞行"); } //定义第一种飞行物: Bee,继承并扩展父类型Flyer //定义独有的构造函数

js 构造函数(construction)与原型(prototype)

1.js原型 java有class和instance,js只有构造函数(function Cat(name,age){this.name=name;this.age=age}),为了实现数据共享和抽象出通用的属性,加了一个原型prototype eg: function Cat(name,age){ this.name = name;//这里的this相当于java里面的instance this.age = age; this.work = function(){ alert("I am wo

js构造函数,索引数组和属性的属性

本文主要介绍和小结js的构造函数,关联数组的实现方式和使用,及不可变对象和它的实现方式及他们使用过程中要注意的点 <script> function p(){ var len=arguments.length; for(var i=0;i<len;i++){ document.write(arguments[i]+"<br/>"); } } function Myclass(x,y){ this.x=x; this.y=y; this.show=funct

深入研究js构造函数和原型

很快就要从新浪离职了,最近心情比较轻松,抽点空整理一下构造函数和原型的机理. 我们都知道,在经典设计模式中我们最常用的就是工厂模式.构造函数模式.原型模式这几种,听起来‘模式’好像很高大上的样子,实际上我们在日常写js代码中会经常用到. 简单的说,工厂模式就是我们平常写的一个个函数,当要完成某项功能时,就一遍一遍调用这个函数.如: function add(a,b){ return a+b; } 这是一个很简单的代码,完成的是一个很简单的两数相加的功能,当我们需要两数相加的计算时,调用这个函数就

JS构造函数中有return

1 function foo(name) { 2 this.name = name; 3 return name 4 } 5 console.log(new foo('光何')) 6 7 function bar(name) { 8 this.name = name; 9 return ['光','何'] 10 } 11 console.log(new bar('光何')) 结果为: 1 'ooo {name: "光何"}' 2 'Array(4) ["光", &q

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

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