1.Object.definePorperty
2.js的执行机制
- js是单线程的
-
js的事件循环(Event Loop)是js的执行机制
image.png
3. js继承(原型继承,借用构造函数继承,组合继承(原型继承+借用构造函数))
function Person(){
this.name = "xiaoju";
this.age = 18;
this.sex = "男"
}
function Student(){
this.score = 18;
}
Student.prototype = new Person(); // 原型继承,无法设置参数
var s1 = new Student();
console.log(s1);
function Animal(species, color) {
this.species = species;
this.color = color;
}
Animal.prototype.sayHi = function(){
console.log(this.name)
}
function Cat(species, color, score) {
Animal.call(this, species, color, score); // 借用构造函数,方法的继承借用构造函数继承不了
this.score = score;
}
let instance = new Cat("人类", "green", 100);
alert(instance.species);
alert(instance.color);
function Animal(species, color) {
this.species = species;
this.color = color;
}
Animal.prototype.sayHi = function(){
console.log(this.name)
}
function Cat(species, color, score) {
Animal.call(this, species, color, score);
this.score = score;
}
Cat.prototype = Animal.prototype; // 借用构造函数继承,可以继承原型的方法
Cat.constructor = Cat;
Cat.prototype.exam = function(){
console.log("考试);
}
let instance = new Cat("人类", "green", 100);
let instance = new Animal("猫","brone"); // 通过Cat.prototype = Animal.prototype的访问可以实现Animal也可以访问Cat原型的方法,唯一不便的就是所有的实例的原型都共享同样的方法
__________修改后___________
Cat.prototype = new Animal(); // 这样的话Cat实例就是单独继承父类型的方法,也有自己独立的方法
原型图.png
4.##### 函数声明与函数表达式
// 函数声明,存在函数声明提升
alert(sum(10,11);
function sum(a,b){
return a+b;
}
// 函数表达式
alert(sum(a,b); // 报错. sum
var sum = function(a,b){
return a+b;
}
call,apply,bind的使用
var obj ={
0:100,
1:10,
2:20,
3:30,
length:4
}
Array.prototype.push.call(obj,30); // 将数组的方法用在对象上面
Array.prototype.splice.call(obj,0,2);
console.log(obj);
________bind______
var obj = {
name: "xiaoju",
exam: function(){
setInterval(function(){
console.log(this.name);
}.bind(this),1000);
}
}
obj.exam(); // bind可以使this指向调用词法作用域,
求数组的最大元素
var arr = [2,3,4,5];
Math.max(arr[0],arr[1],arr[2]);
Math.max.apply(Math,arr);
Math.max.apply(null,arr);
Math.call(Math,arr[0],arr[1],arr[2]);
附:判断一个对象是不是数组
var obj = {name:"23",age:18};
console.log(Object.prototype.toString.call(obj) === '[Object Array]'); // false
________另一种_______
var obj = {name:"23",age:18};
console.log(Array.isArray(obj)); // fasle
高阶函数
- 函数作为参数
深拷贝与浅拷贝
深拷贝与浅拷贝的最大区别在于深拷贝改变拷贝后的值，其原来的值也会改变。当然深拷贝与浅拷贝只针对引用类型这样的复杂类型。
// 浅拷贝
let obj = {
name: "xiaoju",
age: 23,
hobby: ["photography", "cooking", "sking"],
dog: {
name: "小A",
age: 2
}
}
// let temp = obj;
let temp = {};
for (key in obj) {
if (obj.hasOwnProperty(key)) {
temp[key] = obj[key]
}
}
temp.hobby[0] = "xiaoshitou"; // 这里对拷贝后对象中数组进行修改
temp.age = 24; // 这里对拷贝后对象中的一般类型的值进行修改
console.log(temp);
//age: 24；// 拷贝后的一般类型的值发生改变
// dog: {name: "小A", age: 2}
// hobby: (3) ["xiaoshitou", "cooking", "sking"] // 改变拷贝后对象里面的数组的值
// name: "xiaoshitou"
—————我是华丽的分割线——————
console.log(obj);
//age: 23 // 而原来的对象的一般类型的值不会发生改变，所以深拷贝只是针对与引用类型的值
// dog: {name: "小A", age: 2}
// hobby: (3) ["xiaoshitou", "cooking", "sking"] // 原来的对象的数组的值也会改变。因为它们指向的是同一块内存地址
// name: "xiaoju"
那么如何进行深拷贝呢
function deepCopy(obj, objCopy) {
var copy = {};
for (var prop in obj) {
let temp = obj[prop];
if (temp instanceof Object) {
objCopy[prop] = {};
deepCopy(temp, objCopy[prop]); // 用递归实现引用类型的值进行多层次的拷贝
} else if (temp instanceof Array) {
objCopy[key] = [];
deepCopy(temp, objCopy[prop])
} else {
objCopy[prop] = obj[prop];
}
}
}
var obj = {
name: "nanlan",
age: 23,
hobby: ["photography", "skating", "drawing"],
eaxm: {
project: "computer",
time: "60"
}
}
var obj1 = {};
deepCopy(obj, obj1);
obj1.hobby[0] = "playing"
obj1.eaxm.project = "science";
console.log(obj); // 拷贝后的对象数组和对象均发生改变，不会影响原来的对象
// name: "nanlan",
// age: 23,
// hobby: ["photography", "skating", "drawing"],
// eaxm: {
// project: "computer",
// time: "60"
// }
为多个相同的元素做批处理的方法
<ul id="list">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<script>
function loadTree(parent,callback){
for(var i = 0; i<parent.children.length;i++){
var child = parent.children[i];
callback(child);
// loadTree(child);
}
}
var dom = document.getElementById("list");
loadTree(dom,function(element){
console.log(element.innerText)
});
正则表达式
test()
var reg = /ab[a-z]/; // 这里可以写为 new RegExp('ab[a-z]','i'); // i 表示忽略大小写，g匹配全局。
var str = 'abd';
console.log(reg.test(str)); // 返回一个true 或者是false
exec()
var str = '张三：2500,李四：3000，王五：5000';
var reg = /\d+/gi;
var content = reg.exec(str);
console.log(content); // 返回匹配的结果,只匹配一次
test()
var str = '张三：2500,李四：3000，王五：5000';
var reg = /\d+/g;
console.log(str.match(reg)); // 返回匹配的结果，可以匹配多次
贪婪模式与惰性模式
*+是贪婪模式，后面加个？就是惰性模式
贪婪模式——在匹配成功的前提下，尽可能多的去匹配：从字符串的最前面开始匹配，如果不匹配就从最后删除一个，直到匹配成功为止
惰性模式——在匹配成功的前提下，尽可能少的去匹配：从字符串的最前面开始匹配，如果不匹配就加一个，直到匹配位置
js模块化
好处
- 避免命名冲突
- 更好的分离
- 高复用高可维护性
