每天10个前端小知识（3day）

一、在 JavaScript ，函数是对象

来看这个例子

function bark() {
  console.log('Woof!')
}

bark.animal = 'dog'

我们发现是可以正常运行的，因为在 JavaScript 中是可以的，因为函数是对象！（除了基本类型之外其他都是对象） 函数是一个特殊的对象。你写的这个代码其实不是一个实际的函数。函数是一个拥有属性的对象，并且属性也可被调用。

二、如何给构造函数添加属性

下面来看一个例子

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
}

console.log(member.getFullName());//TypeError

这时我们发现报错了 ，这时因为我们不能像常规对象那样，给构造函数添加属性。如果你想一次性给所有实例添加特性，你应该使用原型。因此本例中，使用如下方式：

Person.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
}

这才会使 member.getFullName() 起作用。为什么这么做有益的？假设我们将这个方法添加到构造函数本身里。也许不是每个 Person 实例都需要这个方法。这将浪费大量内存空间，因为它们仍然具有该属性，这将占用每个实例的内存空间。相反，如果我们只将它添加到原型中，那么它只存在于内存中的一个位置，但是所有实例都可以访问它！

三、在函数中，当未使用 new 时，this 引用的是全局对象（global object）。

来看下面的例子

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

const lydia = new Person('Lydia', 'Hallie')
const sarah = Person('Sarah', 'Smith')

console.log(lydia)//Person {firstName: "Lydia", lastName: "Hallie"}
console.log(sarah)//undefined

为什么会这样呢?这时因为对于 sarah，我们没有使用 new 关键字。当使用 new 时，this 引用我们创建的空对象。当未使用 new 时，this 引用的是全局对象（global object）。 我们说 this.firstName 等于 "Sarah"，并且 this.lastName 等于 "Smith"。实际上我们做的是，定义了 global.firstName = 'Sarah' 和 global.lastName = 'Smith'。而 sarah 本身是 undefined。

四、JavaScript 是一种动态类型语言

来看下面的例子

function sum(a, b) {
  return a + b
}

sum(1, '2')//12

这时为什么呢？因为JavaScript 是一种动态类型语言：我们不指定某些变量的类型。值可以在你不知道的情况下自动转换成另一种类型，这种类型称为隐式类型转换（implicit type coercion）。Coercion 是指将一种类型转换为另一种类型。 在本例中，JavaScript 将数字 1 转换为字符串，以便函数有意义并返回一个值。在数字类型（1）和字符串类型（'2'）相加时，该数字被视为字符串。我们可以连接字符串，比如 "Hello" + "World"，这里发生的是 "1" + "2"，它返回 "12"。

五、{ age: 18 } == { age: 18 }

来看下面的例子

function checkAge(data) {
  if (data === { age: 18 }) {
    console.log('You are an adult!')
  } else if (data == { age: 18 }) {
    console.log('You are still an adult.')
  } else {
    console.log(`Hmm.. You don't have an age I guess`)
  }
}

checkAge({ age: 18 })//Hmm.. You don't have an age I guess

其实在测试相等性时，基本类型通过它们的值（value）进行比较，而对象通过它们的引用（reference）进行比较。JavaScript 检查对象是否具有对内存中相同位置的引用。 题目中我们正在比较的两个对象不是同一个引用：作为参数传递的对象引用的内存位置，与用于判断相等的对象所引用的内存位置并不同。 这也是 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 都返回 false 的原因。

六、use strict的使用

话不多少直接上代码

function getAge() {
  'use strict'
  age = 21
  console.log(age)
}

getAge() //ReferenceError

这是因为使用 "use strict"，你可以确保不会意外地声明全局变量。我们从来没有声明变量 age，因为我们使用 "use strict"，它将抛出一个引用错误。如果我们不使用 "use strict"，它就会工作，因为属性 age 会被添加到全局对象中了。

七、sessionStorage存储的数据什么时候会删除

关闭 tab 标签页 后，sessionStorage 存储的数据才会删除。 如果使用 localStorage，那么数据将永远在那里，除非调用了 localStorage.clear()。

八、hasOwnProperty() 方法详解

hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性，如果是，返回true，否者false; 参数propertyName指要检测的属性名；
用法：object.hasOwnProperty(propertyName) // true/false

hasOwnProperty() 方法是 Object 的原型方法（也称实例方法），它定义在 Object.prototype 对象之上，所有 Object 的实例对象都会继承 hasOwnProperty() 方法。

 hasOwnProperty() 只会检查对象的自有属性，对象原形上的属性其不会检测；但是对于原型对象本身来说，这些原型上的属性又是原型对象的自有属性，所以原形对象也可以使用hasOwnProperty()检测自己的自有属性；

let obj = {
    name:'张睿',
    age:18,
    eat:{
        eatname:'面条',
        water:{
            watername:'农夫山泉'
        }
    }
}
console.log(obj.hasOwnProperty('name')) //true
console.log(obj.hasOwnProperty('age'))  //true
console.log(obj.hasOwnProperty('eat'))  //true
console.log(obj.hasOwnProperty('eatname'))  //false
console.log(obj.hasOwnProperty('water'))  //false
console.log(obj.hasOwnProperty('watername'))  //false
console.log(obj.eat.hasOwnProperty('eatname'))  //true
console.log(obj.eat.hasOwnProperty('water'))  //true
console.log(obj.eat.hasOwnProperty('watername'))  //false
console.log(obj.eat.water.hasOwnProperty('watername'))  //true

九、js中的truthy与falsy

truthy不等于true，是指在布尔上下文中转换后的值为真的值；
falsy不等于false，是指在js中所有表达式为false的值；
所有值都是真值，除非被定义为falsy
falsy值有：undefined null NAN “” 0 false

truthy示例

if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

falsy示例

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")

十、当为数组设置超过数组长度的值的时候会怎样？

先看下面的例子

const numbers = [1, 2, 3]
numbers[10] = 11
console.log(numbers)//[1, 2, 3, 7 x empty, 11]

其实当你为数组设置超过数组长度的值的时候， JavaScript 会创建名为 "empty slots" 的东西。它们的值实际上是 undefined。你会看到以下场景： [1, 2, 3, 7 x empty, 11] 这取决于你的运行环境（每个浏览器，以及 node 环境，都有可能不同）

以上内容均参首页 - 前端面试题宝典 (ecool.fun)https://fe.ecool.fun/