zoukankan      html  css  js  c++  java
  • JavaScript Simple Explain and Use

    Javascript 说明:

    JavaScript 和 Java 之间几乎没有任何关系。
    JavaScript原名为LiveScript,他的作用只是为了处理一些复杂的动态网页。
    目前,JS是遵循ECMAScript(ES6)规定的。


    JavaScript 在HTML5中导入方式:

    1. 元素导入:

    <body>
    <button onclick="alert('hello')"> 点我</button>
    </body>
    

    2. 内部文档导入:

    <head>
    <script>
    	alert('hello');
    </script>
    </head>
    

    3. 外部文档导入:

    <head>
    <script type="text/javascript" src="js/test.js">
    </script>
    </head>
    

    JavaScript 在HTML5中3种提示框(输出方式)

    1. alert()

    <script>
    	alert('hello');
    </script> 
    

    2. comfirm()

    <script>
    	confirm('hello');
    </script> 
    

    3. prompt()

    <script>
    	prompt('hello');
    </script> 
    

    浏览器控制台输出

    1. console方式:

    1. console.log()
    //控制台上输出
    var obj=[{name:1,age:22},{name:1,age:22}];
    console.log(obj);
    
    1. console.dir()
    //控制台上输出,比log更详细
    var obj=[{name:1,age:22},{name:1,age:22}];
    console.dir(obj);
    
    1. console.table()
    //控制台上输出,以表的形式展现
    var obj=[{name:1,age:22},{name:1,age:22}];
    console.table(obj);
    

    ** 结果:**

    name age
    1 22
    2 23

    2. document方式:

    <script>
    	// 向网页上面直接写
    	document.write('hello');
    </script>
    

    JavaScript 类型检查

    • typeof: 检测数据类型的运算符

     typeof 1 => "number";
    
    • instanceof: 检测某个实例是否属于这个类

    • constructor: 获取当前实例的构造器

    JavaScript 中function:

    1. 自动执行函数
    1. ~function(){}()
    2. !function(){}()
    3. +function(){}()
    4. -function(){}()
    

    这四种function()就是一种对函数 -->;(function(n){})(10) ===>自动执行(该function是集定义与执行传参为一体的函数),注意function名字前面有个分号;该作用就是区分函数块的,否则在执行函数时,会有函数嵌套。

    上面这四种符号都是为了简化.

    2. 普通函数

    function A()
    {
    	alert('test');
    }
    

    如果在调用的时候A 这样就只是会返回函数的地址,而A() 则会执行A函数

    3. this

    1: 
    function fun(){
    	console.log(this) // this--> window
    }
    
    2:
    var obj = {fn:fn};  first fn is attr,and second is function fn();
    fn(); // this --> window
    obj.fn(); // this --> obj
    
    3:
    function sum(){
    	fn(); // this --> window
    }
    

    注:

    1. this 指向的object 要看function 执行前面是否有.
    • 如果前面没有.
      • this 永远指向 window/根对象
    • 如果有.
      • this 指向. 之前的对象
    1. 自动执行函数中的this 永远指向window
      this --> window

    4.工厂模式

    • 工厂模式:
    	function createPerson(name,age){
        	var obj = new Object() // 或者 var obj = {};
            obj.name = name;
            obj.age = age;
            obj.print = function(){
            	document.write('name:' + obj.name + 'age:' + obj.age);
            }
            return obj;
        }
        
        var person = createPerson(name,age);
    
    • 普通构造函数模式:
    	function Person(namme,age){
        	//默认创建实例返回
        	this.name = name;
            this.age = age;
            this.print = function(){
            	document.write('name:' + this.name + 'age:' + this.age);
            }
        }
    

    注:

    • 工厂模式,最重要的是在函数执行里 ,new了 一个对象,最后返回这个对象。
    • 普通模式,不会返回任何东西
    • JS 不存在重载,后者会覆盖前者

    最后说下:

    function test(){
    	.name = function(){ // 这里"." 作用是啥?
        }
    }
    

    上面函数中 . 点号的作用是啥?

  • 相关阅读:
    二、Spring Cloud 之旅 -- Eureka 微服务的发布与调用
    一、Spring Cloud项目搭建
    intellij 破解
    Koa.js 2.x 学习笔记
    MongoDB 学习笔记
    在github上部署静态网页
    vue绑定值与字符串拼接两种写法
    Vue的生命周期及其相应的三个阶段解读
    element-ui 报错 Invalid prop: custom validator check failed for prop "index"
    StyleLint 使用指南
  • 原文地址:https://www.cnblogs.com/Kernel001/p/10092062.html
Copyright © 2011-2022 走看看