美文网首页
JavaScript简介--函数和类

JavaScript简介--函数和类

作者: Hardy_Hu | 来源:发表于2017-04-20 10:51 被阅读0次

JavaScript是一个脚本语言,它由LiveScript改名而来,只是为了更好地推广这个脚本语言,因此Netscape公司才决定改名为JavaScript。

一. JavaScript面向对象的概念

1.JS伪继承

Js是一个弱类型变量的语言, 虽然Js支持类和对象,但仍然不是面向对象的程序设计语言。面向对象设计的三大基本特征:继承、多态、封装, JS没有很好的实现继承和多态。

JS没有继承的概念,只能通过Prototype实现伪继承。

    <!-- js不支持继承机制, 通过Prototype实现伪继承,对类实现动态添加属性或方法。 -->
    <script type="text/javascript">
        function Person(name,age)
        {
            this.name = name;
            this.age = age;
            this.info = function(){
                document.writeln("姓名:"+this.name + "<br/>");
                document.writeln("年龄:"+this.age + "<br/>");
            }
        }
        var p1 = new Person('hardy', 29);
        p1.info();
        // p1无法调用walk方法, 因为暂时没有此方法
//        p1.walk();

//       prototype动态给Person类添加方法让实例对象去调用, 相当于iOS中类别扩展方法, 所以prototype称为伪继承。
        Person.prototype.walk = function(){

            document.writeln(this.name + '正在慢慢溜达...' + '<br/>');
        }
        // 这时p1可以调用walk方法了。
        p1.walk();
    </script>

2. JavaScript创建对象

js有三种创建对象的方法:new 构造法、 Object空对象、Json创建。

  1. 使用New方法构造一个对象
<script type="text/javascript">
        // 1.  先定义一个类, 然后使用New构造一个对象
        function Person(name, age)
        {
            this.name =  name;
            this.age= age;
        }
        // 使用new构造一个对象
        var  p = new Person('hardy', 30);
        document.writeln(p.name + '<br/>');
    </script>
  1. 使用Object创建对象
<script type="text/javascript">
        //2. Object创建一个空对象, 然后逐步添加属性和方法
        var  emptyObject = new Object();
        // 添加属性
        emptyObject.name = 'yeeku';
        emptyObject.age = 29;
        document.writeln(emptyObject.name + "<br/>");
    </script>
  1. 使用Json语法创建一个对象
 <script type="text/javascript">
        //3. 使用Json语法创建对象
        var  jsObj = {
            name: 'Vita',
            age : 24
        }
        alert(jsObj.name);
    </script>

3. JS对象属性访问

JS对象与纯碎的面向对象语言的对象存在一定的区别:JS中的对象本质上是一个关联数组,或者说更像Java里面Map数据结构,由一组key-value对组成。

<script type="text/javascript">
        function Person(name, age)
        {
            this.name = name;
            this.age = age;
            this.info = function(){
                alert('info method');
            }
        }
        var p = new Person('hardy', 30);
        // 将p当做一个map, 遍历获取其属性
        for(var keyName in p)
        {
            // 如果写成 p.keyName, 浏览器会将keyName当做p的一个属性, 但实际是p并没有keyName这个属性。
            document.writeln('p对象的' + keyName + '属性值为:'+p[keyName] + '<br />');
        }
    </script>

在遍历对象的属性时,要将keyName当做一个Map的key来使用。当然平时访问对象的某个属性时依然是使用.语法,如p.name获取p对象的名字。

 document.writeln('p对象的' + name + '属性值为:'+p.name + '<br />');

二. JS函数

1. JS函数概念及定义

JS是一种基于对象的脚步语言,JS代码复用的单位依然是函数。定义函数的三种方法:

  1. 定义命名函数, function开头+ 函数名 + (参数名)
<script type="text/javascript">
        //   函数名: functionName
        //   参数:parameters, JS不需要指定参数的类型。
        function functionName (parameters){
            // 函数的实现
            alert(parameters);
        }
        // 函数的调用
        functionName("hardy_hu");
</script>
  1. 定义匿名函数:function+(参数名), 然后将这个实现语句赋给一个变量。
<script type="text/javascript">
     var  f = function(parameters){
              alert(parameters);
             };

          // 调用函数
         f("我是你们函数");
</script>

iOS中的Block就是你们函数。匿名函数是实现代码,需要赋给变量。

  1. 使用Function类匿名函数
<script type="text/javascript">
        var  fun = new Function('name', "document.writeln('Function  定义的函数<br/>');" + "document.writeln('你好'+name);");
        fun("hardy_hu");
</script>

Function类的构造器的参数个数可以不受限制,可以接受一系列的字符串参数,前面的各字符串参数是函数的参数,后面的字符串参数是函数的执行体,执行体的各语句以分号隔开。new Function()更像一个Object的通用构造器,只是当函数执行体比较多时会变得十分臃肿,所以这种方式定义函数的可读性不好。

2. JS函数、方法、对象和类

函数是JS编程里面非常重要的一个概念,当使用JS定义一个函数后,实际上可以得到如下4项:

  • 函数:像java方法一样,这个函数可以被调用
  • 对象:定义一个函数时,系统会创建一个对象,该对象是Function 的实例。
  • 方法:定义一个函数是,该函数通常都会附加给某个对象,作为该对象的方法。
  • 类:在定义函数的同时,也得到了一个函数同名的类。
 <script type="text/javascript">
        
        //定义一个函数
        var test = function(name)
        {
            return "你好" + name;
        }
        // 调用函数、 方法
        var result =  test('hardy')
        
        // 类构造器, 创建一个对象
        var obj = new test('hardy');
        
    </script>

3. 函数的3种调用方法

函数有3种调用方法:直接调用, call调用, apply调用

<script type="text/javascript">
        var  myfun = function(a,b){
            document.writeln("<br/>a的值是:" +a +" b的值是:"+b);
        }
        // call方法动态调用函数
        myfun(23,33);
        myfun.call(window, 12, 23);
        myfun.apply(window,[33, 44]);
 </script>

三. 函数的实例属性和类的属性

JS函数不仅是一个函数,也是一个类,且是此类的唯一的构造器。

<script type="text/javascript">

        function Person(national, age)
        {
            // 实例属性,类似iOS中的-方法
            this.age= age;
            // 类属性, 类似iOS中的+方法
            Person.national= national;
            // 局部变量, 实例对象不可以访问!!!
            var  bb =0;
        }
        var  p = new Person('china', 30);
        document.writeln('实例属性:'+ p.age + '类属性:'+Person.national + '局部变量:'+ p.bb);
</script>

运行效果如下,可以看到无法访问局部变量bb的值。

局部变量.png
  1. JS支持类和对象的概念,但不是面向对象的程序设计语言,而是基于对象的脚本语言。
  1. JS函数更多的是执行某个方法,求得某个值并返回。 JS类,更多的是获取某个对象自己身上的属性值

相关文章

  • JavaScript简介--函数和类

    JavaScript是一个脚本语言,它由LiveScript改名而来,只是为了更好地推广这个脚本语言,因此Nets...

  • JavaScript基础

    JavaScript简介JavaScript变量JavaScript对象、函数JavaScript数字,字符串Ja...

  • JQuery概述和选择器

    JQuery简介: jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封...

  • 窗口函数(OVER 子句)

    窗口函数简介 数据准备 问题描述 解答 窗口函数简介 窗口函数是 SQL 中一类特别的函数。 和聚合函数相似,窗口...

  • day09-JavaScript基础

    一、JavaScript入门 1.JavaScript简介 JavaScript(简称“JS”) 是一种具有函数优...

  • 不可遗忘的JavaScript函数

    JavaScript中函数是第一类对象。函数与对象共存,函数也可以被视为其他人一类型的JavaScript对象。函...

  • 第4章 构造函数和原型对象

    由于JavaScript(ES5)缺乏类,但可用构造函数和原型对象给对象带来与类相似的功能。 4.1 构造函数 构...

  • javascript 类

    Class 简介 类的由来 JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子 上...

  • 来聊聊JavaScript核心之"伪类子类"

    前面的文章已经介绍过类的三种模式-函数类,原型类和伪类。一起来聊聊JavaScript核心中的"函数类""来聊聊J...

  • Javascript 编程全解(笔记一)

    函数JavaScript 的函数是一种对象。 对象 Javascript 中没有类这样的语言结构, Javascr...

网友评论

      本文标题:JavaScript简介--函数和类

      本文链接:https://www.haomeiwen.com/subject/kqpkzttx.html