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(){ // 这里"." 作用是啥?
    }
}

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

posted @ 2018-12-09 17:03  Kernel001  阅读(165)  评论(0编辑  收藏  举报