0503js

2021/5/11 10:59:11

编程Tag： 对象 var 构造函数 console name log 0503js

本文主要是介绍0503js，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.自动隐式类型转换tip

a.toString()
String(a)
Number(a)
为一个值-0 *1 /1 将其转换成Number
+0不行，容易遇到字符串
var d = “123”;
d = d-0;
console.log(typeof d);
console.log(d);

结果:
“number”
“123”

2. a++, ++a

var a = 1;
a++;
++a;//都会使原变量的值立即加一，但是表达式的值不同

var a = 1;
console.log(a++);//1
console.log(a);//2
console.log(++a);//3
console.log(a);//3

3.可以任意类型值取两次！！,就可以转换为Boolean类型。原理和Boolean()函数一样

4. prompt

用户输入的内容作为返回值返回，返回值是string

var score = prompt("请输入小明的期末成绩：");

在这里插入图片描述
如果希望返回值转换类型为number则
用运算符+，写成+prompt();

 <script type = "text/javascript">
        var num1 = +prompt("请输入第一个数：");
        var num2 = +prompt("请输入第二个数：");
        var num3 = +prompt("请输入第三个数：");
        alert(typeof num1);//number
 </script>

实现功能：非法输入则重复弹出输入框，否则结束

     while(true){
            var score = prompt("请输入小明的期末成绩：")
            if(score>=0 && score<=100)
                break;
        }

5.非法输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var score = prompt("请输入小明的期末成绩：");
        if(score > 100 || score < 0 || isNaN(score)){
            alert("拉出去！！！");
        }else {
        if(score==100)
            console.log("奖励一辆BMW");
            else if(score>=80&&score<100)
            console.log("奖励一台iphone15s");
                else if(score>=60&&score<80)
                console.log("奖励一本参考书");
                    else{
                    console.log("什么奖励也没有");
                    }
        }
            
    </script>
</head>
<body>
</body>
</html>

6.在浏览器页面中换行

        document.write(1+"<br />");
        document.write(2+"<br />");

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        for(var i=1;i<=10;i++){
            for(var j=0;j<i;j++){
                document.write("*");
            }
            document.write("<br />");
        }
    </script>
</head>
<body> 
</body>
</html>

显示结果：
在这里插入图片描述

7.for循环里巧用标签 r如 outer: break跳出当前循环，continue跳出当次循环

 <script type="text/javascript">
        for(var i = 0;i<5;i++){
            if(i==2) {continue};
            console.log(i);
        }
    </script>

    <script type="text/javascript">
        outer:
        for(var i = 0;i<5;i++){
            console.log("@外层循环"+i);
            for(var j = 0; j<5;j++){
                break outer;
                console.log("@内层循环："+js);
            }
        }
    </script>

控制台输出：
在这里插入图片描述

8.对象分类

-内建(ES标准中定义的、Math\String、Number\Function\Object)、宿主（由JS运行环境提供的，document\console）、自定义

9.堆内存、栈内存

基本数据类型的值直接在栈内存中存储，值与值之间是独立存在。修改一个变量不会影响其它变量。
对象是保存在堆内存中的，每创建一个新的对象，就会在内存中开辟出一个新的空间，变量存储在栈内存中，变量保存的是对象的内存地址(即对象的引用)，相当于一个指针。
在这里插入图片描述

修改obj对象属性，也会影响obj2对象的属性值
当obj2 =null时，情况如下

console.log(obj3==obj4)//false
原因如下：
当比较两个基本数据类型的值时，就是比较值，
而比较两个引用数据类型的时候，他是比较对象的内存地址，
如果两个对象的内容一模一样，但地址不同，会返回false
在这里插入图片描述

10. this

1.函数方式调用this，this是window
2.方法方式调用this，谁调用方法this就是谁
3.当以构造函数形式调用时，this就是新创建的那个对象

    <script type= "text/javascript">
        var name = "全局";
        function fun(){
            console.log(this.name);//this,当前执行环境
            console.log(name);//始终使用全局变量“全局”
        }
        //创建两对象
        var obj={
            name:"孙悟空",
            sayName:fun
        }

        var obj2={
            name:"沙和尚",
            sayName:fun
        }
        obj2.sayName();
    </script>

11.垃圾回收（GC）

将不再使用的对象设置为null

12.创建对象

1.Object()
2.对象字面量
3.工厂模式创建对象
不用重复代码，
使用工厂模式创建的对象使用的构造函数都是Object(),所以创建的对象都是object类型，导致无法区分多种类型的对象

<script type="text/javascript">
        function createPerson(name, age, gender){
            var obj = new Object();
            //向对象中添加属性
            obj.name = name;
            obj.age = age;
            obj.gender = gender;
            obj.sayName = function(){
                alert(this.name);
            };
            //将新的对象返回
            return obj;
        }
        var obj2 = createPerson("猪八戒",28,"男");
        console.log(obj2);
    </script>

4.构造函数创建对象
缺点：每个方法都要在每个实例上重新创建一遍，如果方法的数量很多，就会占用很多不必要的内存。于是出现了第五种创建对象的方法
构造函数的执行流程：
1.立即创建一个新的对象
2.将创建的对象设置为函数中的this
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回

    <script type="text/javascript">
        /*
            创建一个构造函数，专门用来创建person对象的
            构造函数就是一个普通的函数，闯进啊方式和普通函数没有区别
            不同的是构造函数首字母大写
            普通函数是直接调用，构造函数需要使用new关键字来调用

            构造函数的执行流程：
            1.立即创建一个新的对象
            2.将创建的对象设置为函数中的this
            3.逐行执行函数中的代码
            4.将新建的对象作为返回值返回

            使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类
            构造函数创建的对象称为该类的实例
        */
       function Person(name, age, gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
       }
       function Dog(){

       }
       var per = new Person("sunwukong",18,"男");
       var per2 = new Person("猪八戒",18,"男");

       var dog = new Dog();
       console.log(per);
       console.log(per2);
       console.log(dog);
       /*
       使用instanceof可以检查一个对象是否是一个类的实例
       */
      console.log(per instanceof Person)
      console.log(dog instanceof Dog)
      console.log(dog instanceof Person)
      /*
      所有的对象都是Object对象
      */
      console.log(per instanceof Object)
      console.log(dog instanceof Object)
    </script>

结果：
在这里插入图片描述

5.构造函数的修改
不共享方法验证：

    <script type= "text/javascript">
       function Person(name, age, gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayName = function(){
                alert("Hello,我是"+this.name);
            };
       } 

       var per = new Person("孙悟空", 17, "男");
       var per2 = new Person("白骨精", 22, "女");

       console.log(per.sayName == per2.sayName);//结果为false
    </script>

将sayName方法在全局作用域中定义
这样sayName函数自始至终只有一个

    <script type= "text/javascript">
       function Person(name, age, gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
            //向对象中添加一个方法
            this.sayName = fun;
       } 
       //将sayaName方法在全局作用域中定义
       function fun(){
        alert("Hello,我是"+this.name);
       }

       var per = new Person("孙悟空", 17, "男");
       var per2 = new Person("白骨精", 22, "女");

       console.log(per.sayName == per2.sayName);//结果为true
    </script>

还存在一个问题：
将函数定义在全局作用域，污染了全局作用域的命名空间；而且定义在全局作用域中也很不安全，容易被同名函数覆盖。
引入原型，方法6

6.原型+构造函数

    <script type= "text/javascript">
       function Person(name, age, gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
       } 
       //将sayaName方法在全局作用域中定义
       /*
        将函数定义在全局作用域，污染了全局作用域的命名空间
        而且定义在全局作用域中也很不安全，容易被同名函数覆盖
        引入原型
       */

       Person.prototype.sayName = function(){
        alert("Hello,我是"+this.name);
       };

       var per = new Person("孙悟空", 17, "男");
       var per2 = new Person("白骨精", 22, "女");
       per.sayName();
       per2.sayName();
    </script>

 所以以后在创建构造函数的时，可以将对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用为每一个对象添加，也不会影响到全局作用域，就可以使每个对象共享这些属性和方法。

13.原型对象

原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象。
作用：可以将对象中共有的内容统一设置到原型对象中

	 <script type = "text/javascript">
        function MyClass(){

        }
        var mc = new MyClass();
        var mc2 = new MyClass();
        var mc3 = new MyClass();
        console.log(mc.__proto__ == MyClass.prototype);//true
        console.log(mc.__proto__ == mc2.__proto__);//true
    </script>

在这里插入图片描述
给原型对象添加属性a

MyClass.prototype.a = "123";