JavaScript 小知识

2021-09-11

先来创建个对象

通过对象字面量来创建

var student = {
  name: "小黑",
  age: 18,
  like: "play computer games",
  run: function () {
    alert(this.name + " " + this.age + " " + this.like);
  },
};
student.run(); //既然是方法不写括号一律打死

运行结果:
小黑 18 plaYcomputer games

通过 new Object() 创建对象

var student = new Object();
student.name = "小黑"; //这边就可以不写 , 了，但是前缀要加student对象名
student.age = 18; //其次是对象的属性赋值变成了 =
student.like = "play computer games";
student.run = function () {
  alert(this.name + " " + this.age + " " + this.like);
};
student.run();

通过工厂函数创建对象

function runapp(name, age, like) {
  var student = new Object();
  student.name = name;
  student.age = age;
  student.like = like;
  student.play = function () {
    document.write(student.name + " " + student.age + " " + student.like);
  };
  return student;
}
var s1 = runapp("小黑", 18, "play computer games");
s1.play();

运行结果其实一目了然，和上面差不多。

自定义构造函数
写法类似 java

function Runapp(name, age, like) {
  this.name = name;
  this.age = age;
  this.like = like;
  this.play = function () {
    document.write(this.name + " " + this.age + " " + this.like);
  };
}

var s1 = new Runapp("小黑", 18, "play computer games");
s1.play();

谁被 new 谁就是对象，个人理解。

delete 删除对象属性

var student = {
  name: "小黑",
  age: 18,
};
student.name; // 小黑
delete student.name;
student.name; // undefined

new 与 this 是啥？

new 关键字
构造函数，是一种特殊的函数。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与 new 运算符一起使用在创建对象的语句中。这里有需要特别注意的几点：

构造函数用于创建一类对象，首字母要大写。
内部使用 this 关键字给对象添加成员。
使用 new 关键字调用对象构造函数。
this 详解
在 JavaScript 中，我们经常会使用到 this 关键字，那么 this 到底指向什么呢？这里有一个口诀：谁调用 this，它就是谁。大家也可以从前面的例子中细细体会一下。

函数在定义的时候 this 是不确定的，只有在调用的时候才可以确定。
一般函数直接执行，内部 this 指向全局 window。比如：

function test() {
  console.log(this);
}
test(); // window.test();

函数作为一个对象的方法，被该对象所调用，那么 this 指向的是该对象。
构造函数中的 this，始终是 new 的当前对象。

addEventListener() 方法

为元素添加事件和方法。

<body>
<p id="p1">666</p>
</body>
<script>
document.getElementById("p1").addEventListener("click", function () {
    document.getElementById("p1").innerHTML="456";})  //修改p节点的值
</script>

注意事项：该方法别写函数里，调用再执行也太 sb 了，也用不了(Me)。
也不要尝试 function 改成”run()”啥的，让 run()在外面被实现，没用。
真要这样做只会导致刷新页面直接调用函数

event 对象

event 代表事件的状态，例如触发 event 对象的元素、鼠标的位置及状态、按下的键等等。
event 对象只在事件发生的过程中才有效。

<input type="button" value="点击" onClick="show()" />

</body>
<script>
function show(){
 alert("altKey："+window.event.altKey
  +"\nshiftKey："+window.event.shiftKey
  +"\nctrlKey："+window.event.ctrlKey);
}
</script>

根据运行实验，我发现直接点击按钮弹出的状态都是 false。
但是只要你键盘按下对应的 shift||alt||ctrl 之后，它的状态就会变成 true。
以下是示例：

1	<html lang="en" onkeydown="run()">

以下是方法体：

function run() {
  if (window.event.keyCode == 86) {
    var rnd = play() + "," + play() + "," + play();
    document.bgColor = rnd;
  }
}
function play() {
  return Math.floor(Math.random() * 256);
}

null 和 undefined 的区别

两者虽然值相等但是类型不相等
null === undefined //false
null == undefined //true
两者对比 false 和 0 都是 false

在 JavaScript 中没有重载

function f(a, b) {
  return a + b;
}
function f(a, b, c) {
  return a + b + c;
}
var result = f(5, 6); //NaN f(1,2,3) = 6

说白了，旧的方法会被覆写。

自调用函数

疑似一次性函数。

1
2
3

(function () {
  alert("hello");
})();

语法：(函数定义与方法体)();//所有括号都要加

concat() 小方法

concat() 方法，连接字符串，等效于 “+”，“+” 更常用。与数组中的 concat()方法类似。

round()

是 Math 对象内的方法，返回四舍五入的值。

call()

all() 方法调用一个函数, 其具有一个指定的 this 值和分别地提供的参数（参数的列表）。语法为：

1 2	fun.call(thisArg, arg1, arg2, ...)

thisArg 指的是在 fun 函数中指定的 this 的值。如果指定了 null 或者 undefined 则内部 this 指向 window，同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。是一个可选项。
arg1, arg2, …指定的参数列表。也是可选项。
使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。
call() 允许为不同的对象分配和调用属于一个对象的函数/方法。
call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call() 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

看例题：

function foods() {} //空函数
foods.prototype = {
  //改个对象的值与方法
  price: "￥15",
  say: function () {
    console.log("My price is " + this.price);
  },
};

orange = {
  price: "￥10",
};
var apple = new foods(); //苹果实例化
apple.say(); // My price is ￥15
apple.say.call(orange); //苹果下的该方法给橘子用
// My price is ￥10

另一个例题：

function Father(name, age) {
  this.name = name;
  this.age = age;
}

function Son(name, age) {
  Father.call(this, name, age);
  this.like = "computer";
}

var S1 = new Son("qx", 18);
console.log(S1); //Son {name:"qx",age:19,like:"computer"}

apply()

1
2
3

var arr = ["a", "b", "c"];
var nums = [1, 2, 3];
arr.push.apply(arr, nums);

arr:[“a”,”b”,”c”,1,2,3]