JavaScript 函数和面向对象

已于 2022-04-25 17:01:49 修改
阅读量1.7k 收藏 9
点赞数 2
分类专栏： JavaScript 文章标签： javascript
于 2022-04-24 18:19:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code34/article/details/124376455
版权

文章目录

1.函数

定义一个绝对值函数
方法一：

function abs(x){
            if(x>=0){
                return x;
            }else {
                return -x;
            }
        }

方法二：

var abs = function (x){
            if(x>=0){
                return x;
            }else {
                return -x;
            }
        }

function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
调用函数
abs(10)
abs(-10)
参数问题：javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？
假设不存在参数，如何规避？
解决方法：
抛出一个异常

function abs(x){
            if (typeof x!='number'){
                throw 'Not a number';
            }
            if(x>=0){
                return x;
            }else {
                return -x;
            }
        }

arguments
arguments是一个JS免费赠送的关键字；
代表传递进来的所有参数，是一个数组！

var abs = function (x){
            console.log('x>='+x);
            for (let i=0;i<arguments.length;i++){
                console.log(arguments[i]);
            }
            if(x>=0){
                return x;
            }else {
                return -x;
            }
        }

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest
以前：

var aaa = function (a,b){
            console.log('a>='+a);
            console.log('b>='+b);
            for (let i=2;i<arguments.length;i++){
                ...
            }
        }

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…

var aaa = function (a,b,...rest){
            console.log('a>='+a);
            console.log('b>='+b);
            console.log(rest);
        }

rest参数只能写在最后面，必须用…标识。

2 变量的作用域

在javascript中，var定义变量实际是有作用域的。
假设在函数体内声明，则在函数体外不可以使用~（闭包）

 function aa(){
            var x=1;
            console.log(x+1);
        }
        console.log(x);//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部就不冲突

function aa(){
            var x=1;
            console.log(x+1);
        }
        function aaa(){
            var x=2;
            console.log(x+1);
        }

外部函数可以访问内部函数的成员，反之则不行

function bb(){
            var x='out';
            function bbb(){
                var x='inner';
                console.log(x);
            }
            bbb();
            console.log(x);
        }
        bb();//inner  out
        bbb();//Uncaught ReferenceError: bbb is not defined

假设，内部函数变量和外部函数变量，重名！
假设在JavaScript中，函数查找变量从自身函数开始~， 由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

function cc(){
            var x=1;
            console.log(y);//undefined
            var y=1;
        }

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
这个是在javascript建立之初就存在的特性。 养成规范：所有 的变量定义都放在函数的头部，不要乱放，便于代码维护；
全局变量
window就是全局变量的对象
alert() 这个函数本身也是一个window的变量；
在这里插入图片描述

javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 Refrence
由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？
唯一全局变量
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()
ES6的let关键字，解决了局部作用域冲突的问题！
let关键字
在这里插入图片描述
常量关键字 const
在这里插入图片描述

3.方法的定义和调用

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var xiaobai = {
            name: '小白',
            brith: 2020,
            age: function () {
                var now = new Date().getFullYear();
                //this是无法指向的，是默认指向调用它的那个对象的；
                return now - this.brith;
            }
        };
        //属性
        xiaobai.name;
        //方法，一定要带（）
        xiaobai.age();

apply

function getAge(){
           var now = new Date().getFullYear();
           //this是无法指向的，是默认指向调用它的那个对象的；
           return now - this.brith;
       }
        //在js中可以控制this指向
        var xiaoming = {
            name: xiaoming,
            brith: 3,
            age :getAge
        };
        getAge.apply(xiaoming,[]);

4.内部对象

标准对象

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

4.1Date

基本日期使用

<script>
        'use strict';
        var now = new Date();
        now.getFullYear();//年
        now.getMonth();//月 0~11
        now.getDate();//日
        now.getDay();//星期
        now.getHours();//时
        now.getMinutes();//分
        now.getSeconds();//秒
        now.getTime();//时间戳 全球统一 1970 1/1 00:00:00 毫秒数
        console.log(new Date(1650789933108));//时间戳转换为时间
        now.toLocaleString();
        //'2022/4/24 16:45:57'
        now.toGMTString();
        //'Sun, 24 Apr 2022 08:45:57 GMT'
    </script>

4.2 JSON

早期，所有数据传输习惯使用XML文件!
JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示
格式
对象都用{}
数组都用[]
所有的键值对 都是用key:value
JSON字符串和js对象转化：

<script>
        var user ={
            name :"xiaobai",
            age: 20,
            sex:'nan'
        }
        //对象转换为json字符串
        var jsonuser = JSON.stringify(user);
        //json字符串转换为对象 参数为json字符串，通常用“”
        var obj =JSON.parse('{"name":"xiaobai","age":"20","sex":"nan"}');
    </script>

在这里插入图片描述

4.3、AJAX

原生的js写法 xhr异步请求
jQuery封装好的方法$(#name).
ajax(“”)axios请求

5.面向对象

5.1什么是面向对象

原型对象 javascript、java、c#------面向对象；但是javascript有些区别！
类：模板
对象：具体实例
在javascript中，需要大家转换一下思维方式！ 原型：

<script>
        var student ={
            name :"student",
            age: 20,
            run: function (){
                console.log(this.name+"run....");
            }
        };
        
        var xiaoming ={
            name:"xiaoming"
        };
        //原型对象
        //xiaoming的原型是student
        xiaoming.__prot__ = student;
        
        var Brid ={
            fly:function (){
                console.log(this.name+"fly...");
            }
        };
        //xiaoming的原型是brid
        xiaoming.__prot__ = Brid;
    </script>

5.2 class

class关键字，是在ES6引入的
1、定义一个类、属性、方法

<script>
        class Student {
            constructor(name) {
                this.name = name;
            }

            hellow() {
                alert("hellow");
            }
        }
        var xiaoming = new Student("xiaoming");
        var xiaobai = new Student("xiaobai");
        xiaoming.hellow();
        xiaobai.hellow();

5.3 继承

ES6之后才有的继承

<script>
        class Student {
            constructor(name) {
                this.name = name;
            }

            hellow() {
                alert("hellow");
            }
        }
        class Person extends Student{
            constructor(name,grade ) {
                super(name);
                this.grade=grade;
            }
            myGrade(){
                alert("我是一个人");
            }
        }
        var xiaoming = new Student("xiaoming");
        var xiaobai = new Person("xiaobai");
        xiaoming.hellow();
        xiaobai.myGrade();
    </script>

在这里插入图片描述
原型链，查看object的原型链是点不完的，因为他是个圆，student的实例原型指向Object的原型
在这里插入图片描述

已工作的小白
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值