js基本用法
2019-10-20 本文已影响0人
杰克_王_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js基本用法</title>
</head>
<!-- 一个普通函数的冷僻属性(length、caller、arguments、name、[[Scopes]]和[[FunctionLocation]]) https://blog.csdn.net/qq_17175013/article/details/81915059 -->
<!-- JavaScript内部属性[[Scope]]与作用域链及其性能问题 https://blog.csdn.net/q1056843325/article/details/53086893?locationNum=12&fps=1 -->
<!-- JavaScript预编译原理分析 https://blog.csdn.net/q1056843325/article/details/52951114 -->
<!-- JavaScript欺骗词法的eval、with与catch及其性能问题 https://blog.csdn.net/q1056843325/article/details/53106108 -->
<body>
<script>
function func() {
console.log(a);
// console.log(b); // 这里会报错
var a = 1;
b = 2; // 变量会绑定到 window对象上
console.log(a);
console.log(b);
}
// func();
// console.log("window.a: ", window.a); // undefined
// console.log("window.b: ", window.b); // 2
var fc = new func();
console.log("window.a: ", window.a); // undefined
console.log("window.b: ", window.b); // 2
</script>
<script>
/*
js 函数声明提升和变量声明提升
https://blog.csdn.net/qq_33576343/article/details/81458133
*/
console.log(a);
console.log(b);
console.log(c);
b();
var a = 1;
function b() {
console.log("call b function");
}
var c = function c() {
console.log("call b function");
}
</script>
<script>
/*arguments 的基本用法*/
function add() {
console.log(arguments);
for (i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
console.log(Array.from(arguments));
console.log(arguments.callee); // arguments.callee 指向函数本身
console.log(this);
}
add(1, 2, 3, 4, 5);
</script>
<script>
/*js字面量对象的使用*/
var obj = {
property: "a",
func: function () {
console.log(this);
console.log(this.property);
console.log(this.func);
}
}
console.log(obj);
console.log(obj.property);
console.log(obj.func);
obj.func();
</script>
<script>
/*函数与构造函数的区别*/
function MyClass() {
console.log(this);
this.name = "jieke";
this.age = 20;
console.log(this);
console.log(this.name);
}
console.log("MyClass.prototype: ", MyClass.prototype);
console.log("MyClass.__proto__: ", MyClass.__proto__);
console.log("window.name: ", window.name);
console.log("window.age: ", window.age);
MyClass();
console.log("window.name: ", window.name);
console.log("window.age: ", window.age);
var mc1 = new MyClass();
var mc2 = new MyClass();
console.log("mc1 == mc2: ", mc1 == mc2);
console.log("mc1 === mc2: ", mc1 == mc2);
console.log("mc1.__proto__ === mc2.__proto__: ", mc1.__proto__ === mc2.__proto__);
</script>
<script>
/*改变this指向*/
function globalFunc() {
console.log(this); // 默认指向全局对象
}
globalFunc();
globalFunc.call({ m: "000" }); // 立即执行
globalFunc.apply({ mk: '000' }); // 立即执行
var func = globalFunc.bind({ mk: '000' }); // 不会立即执行
func(); // 执行函数
</script>
<script>
/*方法的延时调用*/
function s12() {
console.log("aaaaaaaa");
}
--setTimeout(s12, 5000);
setTimeout('s12()', 5000);
</script>
<script>
/*借用其它对象的方法*/
var obj1 = {
name: 'song',
getName: function () {
console.log('----------------');
console.log(this.name);
}
}
obj1.getName();
// 借用其它对象的方法
var obj2 = { name: "jieke" };
obj1.getName.call(obj2);
obj1.getName.bind(obj2)();
</script>
<script>
// 对象元素借用
function A1(name) {
console.log(this);
this.name = name;
console.log(this);
}
function B1(name, age) {
this.age = age;
--A1.call(this);
--A1.apply(this, arguments);
A1.apply(B1, arguments);
}
var b1 = new B1('jieke', '20');
function Persion() {
console.log(this);
this.name = "jieke";
this.age = "20";
}
var obk = { kk: '50' };
Persion.apply(obk);
console.log(obk);
</script>
</body>
</html>
