JavaScript难点

最新推荐文章于 2024-10-06 13:20:09 发布

勤劳的鼹鼠

最新推荐文章于 2024-10-06 13:20:09 发布

阅读量51

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_72286569/article/details/134204416

版权

函数

三种声明方法

Function

function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

function print(a) {
  console.log(a);//a
}

函数表达式

var print = function(s) {
  console.log(s);
};

Function构造函数

var add = new Function(
  'x',
  'y',
  'return x + y'
);
function add(x,y) {
    return x+y;
}

Function构造函数接受三个参数最后交于add函数进行处理

函数名的提升

JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。所以，下面的代码不会报错。

f();
var f = function (){};
//由于变量名的提升函数f被提升到头部相当于下面的代码
var f;
f();
f=function(){};//报错

函数内部变量的提升

function foo(x) {
  if (x > 100) {
    var tmp = x - 100;
  }
}

// 等同于
function foo(x) {
  var tmp;
  if (x > 100) {
    tmp = x - 100;
  };
}

RegExp 对象

在js中RegExp 对象提供正则表达式功能

字符串实例方法（String.prototype.replace()）

字符串对象的replace方法可以替换匹配的值。它接受两个参数，第一个是正则表达式，表示搜索模式，第二个是替换的内容。

'123'.replace('1', '4') // "423"
'aaa'.replace(/1/, '4') // "423"
'aaa'.replace(/1/g, '4') // "444"

在正则表达式加g表示替换所有匹配成功的值；不加g表示就替换第一个匹配成功的值
replace方法的第二个参数可以使用美元符号$，用来指代所替换的内容。

$&：匹配的子字符串。
$`：匹配结果前面的文本。
$'：匹配结果后面的文本。
$n：匹配成功的第n组内容，n是从1开始的自然数。
$$：指代美元符号$。

var str = "a b";
var result = str.replace(/(\w+)\s(\w+)/gi, "$2 $1");
console.log(result); 
//输出 b a 
// 这里的$1 $2分别引用正则表达式中第一个喝第二个括号匹配的内容
var str = 'abc';
var result = str.replace(/b/g, "$`"); //$`代表匹配字符的左侧内容
console.log(result);
//输出： aac
var str = 'abc';
var result = str.replace(/b/g, "$'"); //$'代表匹配字符的右侧内容
console.log(result);
//输出： acc
 var str = "a b";
 var reg = new RegExp(/(\w+)\s(\w+)/, "gi"); //也可以使用正则表示对象来最为参数
 var result = str.replace(reg, "$2 $1");
 console.log(result); //输出 b a

object对象相关方法

Object.getPrototypeOf()

Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。

var F = function () {};
var f = new F();
Object.getPrototypeOf(f) === F.prototype // true

特殊对象原型

// 空对象的原型是 Object.prototype
Object.getPrototypeOf({}) === Object.prototype // true

// Object.prototype 的原型是 null
Object.getPrototypeOf(Object.prototype) === null // true

// 函数的原型是 Function.prototype
function f() {}
Object.getPrototypeOf(f) === Function.prototype // true

Object.setPrototypeOf()

Object.setPrototypeOf方法为参数对象设置原型，返回该参数对象。它接受两个参数，第一个是现有对象，第二个是原型对象。

var a = {};
var b = {x: 1};
Object.setPrototypeOf(a, b);

Object.getPrototypeOf(a) === b // true
a.x // 1

对象的继承

概念：对象1继承对象2以此来获取对象2的属性和方法

构造函数的继承

在子类的构造函数中，调用父类的构造函数。
是让子类的原型指向父类的原型，这样子类就可以继承父类原型。

//构造一个Shape函数
function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
  // 第一步，子类继承父类的实例
function Rectangle() {
  Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
  this.base = Shape;
  this.base();
}

// 第二步，子类继承父类的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
};
//在instanceof运算符会对子类和父类的构造函数，都返回`true`
var rect = new Rectangle();

rect instanceof Rectangle  // true
rect instanceof Shape  // true

多重继承

在js中不提供多重继承功能，即不允许一个对象同时继承多个对象。

function M1() {
  this.hello = 'hello';
}

function M2() {
  this.world = 'world';
}

function S() {
  M1.call(this);
  M2.call(this);
}

// 继承 M1
S.prototype = Object.create(M1.prototype);
// 继承链上加入 M2
Object.assign(S.prototype, M2.prototype);

// 指定构造函数
S.prototype.constructor = S;

var s = new S();
s.hello // 'hello'
s.world // 'world'

原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

function Parent(month){
    this.month = month;
}

var child = new Parent('Ann');

console.log(child.month); // Ann

console.log(child.father); // undefined