JavaScript

是阿楞啊

已于 2024-02-26 17:31:12 修改

阅读量353

点赞数 8

文章标签： javascript 前端 html

于 2024-01-04 17:47:49 首次发布

本文链接：https://blog.csdn.net/m0_56516186/article/details/130171357

版权

一、JavaScript

与大多数编程语言不同，JavaScript 没有输入或输出的概念。它是一个在宿主环境（host environment）下运行的脚本语言，它通常在浏览器中运行，但也可以在其他宿主环境中运行，如服务器端的 Node.js。虽然 JavaScript 本身没有提供输入和输出的概念，但宿主环境可以通过提供相应的 API 来实现与外界的交互。在浏览器中，JavaScript 可以通过 DOM（文档对象模型）来操作网页的内容，包括读取和修改网页元素的值、添加或删除元素等。这种方式可以被视为一种输出，因为它可以将 JavaScript 的计算结果显示在网页上。另外，JavaScript 还可以通过浏览器的事件机制来响应用户的输入，例如点击按钮、输入文本等。这种方式可以被视为一种输入，因为它可以触发 JavaScript 代码的执行。在服务器端的 Node.js 中，JavaScript 可以通过标准输入和标准输出来进行输入和输出。例如，可以使用 console.log() 函数将结果输出到控制台，或者使用 process.stdin 来读取用户的输入。

总之，JavaScript 本身没有提供输入和输出的机制，但宿主环境可以通过提供相应的 API 来实现与外界的交互。

在JavaScript中，apply()和call()是函数对象的两个方法，用于调用函数并指定函数的上下文（即this值）和参数。
apply()方法：apply()方法允许我们在调用函数时指定函数的上下文和参数。它接受两个参数：第一个参数是要调用的函数的上下文，第二个参数是一个数组或类数组对象，它将被当作函数的参数列表使用。例如：
function greet(name) {
    console.log(`Hello, ${name}!`);
}

let person = {
    name: "John"
};

greet.apply(person, ["Alice"]);
在这个例子中，我们定义了一个greet函数，它接受一个参数name并打印出问候语。然后，我们创建了一个person对象，它有一个name属性。

通过使用apply()方法，我们将person对象作为greet函数的上下文，并将["Alice"]数组作为参数传递给greet函数。这样，greet.apply(person, ["Alice"])的效果等同于调用greet("Alice")，输出"Hello, Alice!"。
call()方法：call()方法与apply()方法类似，也是用于调用函数并指定函数的上下文和参数。它接受的参数与apply()方法不同，它的参数是一个个的参数，而不是数组。例如：
function greet(name) {
    console.log(`Hello, ${name}!`);
}

let person = {
    name: "John"
};

greet.call(person, "Alice");
在这个例子中，我们使用call()方法调用greet函数，将person对象作为上下文，并将"Alice"作为参数传递给greet函数。这样，greet.call(person, "Alice")的效果等同于调用greet("Alice")，输出"Hello, Alice!"。

总结起来，apply()和call()都是函数对象的方法，用于调用函数并指定函数的上下文和参数。它们的区别在于参数的传递方式：apply()方法接受一个数组或类数组对象作为参数，而call()方法接受一系列的参数。这两个方法提供了一种灵活的方式来调用函数，并动态地指定上下文和参数。

js 的闭包是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。
function makeAdder(a) {
  return function (b) {
    return a + b;
  };
}

var add5 = makeAdder(5);
var add20 = makeAdder(20);

console.log(add5(2)); // 输出: 7
console.log(add20(2)); // 输出: 22
在这个例子中，makeAdder函数是一个工厂函数，它返回一个新的函数。这个新的函数可以访问并使用makeAdder函数中的变量。具体来说，makeAdder函数接受一个参数a，并返回一个匿名函数。这个匿名函数也接受一个参数b，并返回a + b的结果。通过调用makeAdder函数并传递不同的参数，我们可以创建不同的函数。例如，通过调用makeAdder(5)，我们创建了一个新的函数add5，它可以将传递给它的参数与5相加。同样，通过调用makeAdder(20)，我们创建了一个新的函数add20，它可以将传递给它的参数与20相加。

// js允许递归方式调用函数
// 递归处理DOM（树状结构）
function countChars(elm) {
  if (elm.nodeType == 3) {
    // 文本节点
    return elm.nodeValue.length;
  }
  var count = 0;
  for (var i = 0, child; (child = elm.childNodes[i]); i++) {
    count += countChars(child);
  }
  return count;
}

// 命名立即调用的函数表达式（IIFE——Immediately Invoked Function Expression）
// 更简洁，该名称也显示在调试器和一些堆栈跟踪中，节省了调试时的时间

var charsInBody = (function counter(elm) {
  if (elm.nodeType == 3) {
    // 文本节点
    return elm.nodeValue.length;
  }
  var count = 0;
  for (var i = 0, child; (child = elm.childNodes[i]); i++) {
    count += counter(child);
  }
  return count;
})(document.body);

继承与原型链：JavaScript中的继承是通过原型链来实现的。在JavaScript中，每个对象都有一个原型（prototype），并且对象可以继承其原型的属性和方法。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到对应的属性或方法为止。

js不存在静态分派：可以改变原型链中的任何成员，甚至可以在运行时换出原型。

继承属性和方法: 在js中访问对象的属性（方法也可以看作属性）会依次搜寻每一层原型直至原型为null。
属性遮蔽原则：在js中上层属性和方法会覆盖下层同名属性和方法。
const parent = {
  value: 2,
  method() {
    return this.value + 1;
  },
};

console.log(parent.method()); // 3
// 当调用 parent.method 时，“this”指向了 parent

// child 是一个继承了 parent 的对象
const child = {
  __proto__: parent,
};
console.log(child.method()); // 3
// 调用 child.method 时，“this”指向了 child。
// 又因为 child 继承的是 parent 的方法，
// 首先在 child 上寻找“value”属性。但由于 child 本身
// 没有名为“value”的自有属性，该属性会在
// [[Prototype]] 上被找到，即 parent.value。

child.value = 4; // 在 child，将“value”属性赋值为 4。
// 这会遮蔽 parent 上的“value”属性。
// child 对象现在看起来是这样的：
// { value: 4, __proto__: { value: 2, method: [Function] } }
console.log(child.method()); // 5
// 因为 child 现在拥有“value”属性，“this.value”现在表示
// child.value
构造函数: 当在 JavaScript 中创建一个对象时，可以使用构造函数来定义对象的属性和方法。构造函数是一种特殊的函数，用于创建对象实例.
// 一个构造函数
function Box(value) {
  this.value = value;
}

// 使用 Box() 构造函数创建的所有盒子都将具有的属性
Box.prototype.getValue = function () {
  return this.value;
};

const boxes = [new Box(1), new Box(2), new Box(3)];
类是构造函数的语法糖：

es6 之前使用构造函数和原型链来定义和继承类
// 构造函数 
function Animal(name) {
  this.name = name;
}

// 原型方法
Animal.prototype.sayName = function() {
  console.log('My name is ' + this.name);
}

// 子类
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 创建对象
var myDog = new Dog('Buddy', 'Golden Retriever');
myDog.sayName(); // 输出：My name is Buddy
es6之后使用class语法来定义和继承类：
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log('My name is ' + this.name);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

// 创建对象
var myDog = new Dog('Buddy', 'Golden Retriever');
myDog.sayName(); // 输出：My name is Buddy
构造函数的理解：Constructor.prototype 仅在构造实例时有用。它与 Constructor.[[Prototype]] 无关，后者是构造函数的自有原型，即 Function.prototype。也就是说，Object.getPrototypeOf(Constructor) === Function.prototype。

Constructor.prototype 仅在构造实例时有用：这是指构造函数的 prototype 属性，它用于指定新创建的对象实例的原型。当使用构造函数创建对象实例时，新创建的对象实例会继承构造函数的 prototype 属性上的方法和属性。

它与 Constructor.[[Prototype]] 无关，后者是构造函数的自有原型，即 Function.prototype：这是指构造函数对象本身的 [[Prototype]]，也就是它的原型。在 JavaScript 中，每个对象都有一个 [[Prototype]] 属性，它指向该对象的原型。对于构造函数来说，它的 [[Prototype]] 指向的是 Function.prototype，因为构造函数本身也是一个函数，而 Function.prototype 是所有函数对象的原型。

Object.getPrototypeOf(Constructor) === Function.prototype：这句话的意思是，使用 Object.getPrototypeOf 方法获取构造函数的原型，然后与 Function.prototype 进行比较。这是在验证构造函数的原型是否指向 Function.prototype。

二、jquery

getElementById( select DOM )
getElementsByTagName( select label )
getElementsByClassName( select class )
getAttribute( select attribute )
setAttribute( select attribute )

操作的DOM可以为：document（文档流）、object（具体到某个节点对象）

childNodes
nodeType
nodeValue
firstChild
lastChild

操作的DOM具有的5个属性，值得注意的是nodeType属性有12中类型，常见的元素节点、属性节点、文本节点值分别为1、2、3，为了更好的理解demo如下：

<html>
<head>
<script type="text/javascript">
function getNodeValue()
{
var nv=document.getElementById("td1").firstChild.nodeValue;
var nn=document.getElementById("tr1").nodeValue;
var nv1=document.getElementById("tr1").firstChild.nodeValue;
console.log("nv="+nv);//nv=Silence
console.log("nn="+nn);//nn=null
console.log("nv1="+nv1);//nv1=
console.log(document.getElementById("tr1").firstChild);//<TextNode textContent="\n ">
console.log(document.getElementById("td1").firstChild);//<TextNode textContent="Silence">
}
</script>
</head>
<body>
<table>
  <tr id="tr1">
    <td id="td1" >Silence</td>
    <td>bean</td>
    <td>happy</td>
  </tr>
</table>
<input type="button" value="按钮"  onclick="getNodeValue()"/>
</body>
</html>