js好文

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_43740552/article/details/102679709

apply,call,bind:添加链接描述

js包装对象:添加链接描述

JS属性描述对象:添加链接描述

数据类型概述:添加链接描述

js语言的对象体系,不是基于类的,而是基于构造函数和原型链。JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,就是专门用来生成实例对象的函数。它就是对象的模板,描述实例对象的基本结构。一个构造函数,可以生成多个实例对象,这些实例对象都有相同的结构。

构造函数就是一个普通的函数,但是有自己的特征和用法。

var Vehicle = function () {
  this.price = 1000;
};
上面代码中,Vehicle就是构造函数。为了与普通函数区别,构造函数名字的第一个字母通常大写。
构造函数的特点有两个:
函数体内部使用了this关键字,代表了所要生成的对象实例。
生成对象的时候,必须使用new命令。

new命令的作用,就是执行构造函数,返回一个实例对象。
var Vehicle = function () {
  this.price = 1000;
};

var v = new Vehicle();
v.price // 1000

上面代码通过new命令,让构造函数Vehicle生成一个实例对象,保存在变量v中。这个新生成的实例对象,从构造函数Vehicle得到了price属性。new命令执行时,构造函数内部的this,就代表了新生成的实例对象,this.price表示实例对象有一个price属性,值是1000

为了保证构造函数必须与new命令一起使用,一个解决方法是,构造函数内部使用严格模式,即第一行加上,use strict;这样的话,一旦忘记使用new命令,直接调用构造函数就会报错。

function Fubar(foo, bar){
  'use strict';
  this._foo = foo;
  this._bar = bar;
}

Fubar()
// TypeError: Cannot set property '_foo' of undefined

上面代码的Fubar为构造函数,use strict命令保证了该函数在严格模式下运行。由于严格模式中,函数内部的this不能指向全局对象,默认等于undefined,导致不加new调用会报错(JavaScript 不允许对undefined添加属性)。

另一个解决办法,构造函数内部判断是否使用new命令,如果发现没有使用,则直接返回一个实例对象。

function Fubar(foo, bar) {
  if (!(this instanceof Fubar)) {
    return new Fubar(foo, bar);
  }

  this._foo = foo;
  this._bar = bar;
}

Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1

上面代码中的构造函数,不管加不加new命令,都会得到同样的结果。

new命令的原理:
使用new命令时,它后面的函数依次执行下面的步骤:
1:创建一个空对象,作为将要返回对象的实例。
2:将这个空对象的原型,指向构造函数的prototype属性。
3:将这个空对象赋值给函数内部的this关键字。
4:开始执行构造函数内部的代码。

也就是说,构造函数内部,this指的是一个新生成的空对象,所有针对this的操作,都会发生在这个空对象上。构造函数之所以叫构造函数,就是说这个函数的目的,就是操作一个空对象(即this对象),将其构造成需要的样子。

如果构造函数内部有return语句,而且return后面跟着一个对象,new命令会返回return语句指定的对象,否则,就不会管return语句,返回this对象。

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};

(new Vehicle()) === 1000 // false

上面代码中,构造函数Vehicle的return返回一个数值。这时,new命令就会忽略这个return语句,返回构造后的this对象。

但是,如果return语句返回的是一个跟this无关的新对象,new命令就会返回这个新对象,而不是this对象,这一点需要特别注意。
var Vehicle = function (){
  this.price = 1000;
  return { price: 2000 };
};

(new Vehicle()).price // 2000

上面代码中,构造函数Vehicle的return语句,返回的是一个新对象,new命令就会返回这个新对象,而不是this对象。

JS面向对象—this关键字:添加链接描述

JS Storage接口:添加链接描述

window对象可以接收以下事件:
load事件发生在文档在浏览器窗口加载完毕时。window.onload属性可以指定这个事件的回调函数。

window.onload = function() {
  var elements = document.getElementsByClassName('example');
  for (var i = 0; i < elements.length; i++) {
    var elt = elements[i];
    // ...
  }
};
上面代码在网页加载完毕后,获取指定元素并进行处理。

JS 同源限制:添加链接描述

CORS:添加链接描述 添加链接描述 添加链接描述

JS数据类型—数组:添加链接描述

JS面向对象—Object对象的相关方法:添加链接描述

JS异步操作—概述:添加链接描述

JS异步操作—定时器:添加链接描述

JS Array 对象:添加链接描述

DOM—Node接口:添加链接描述 添加链接描述

DOM—Mutation Observer API:添加链接描述

DOM—Text节点和DocumentFragment节点:添加链接描述

DOM—属性的操作:添加链接描述

DOM—Element节点:添加链接描述

DOM—Document节点:添加链接描述

DOM—ParentNode接口,ChildNode接口:添加链接描述

猜你喜欢

转载自blog.csdn.net/weixin_43740552/article/details/102679709