函数的相关问题整理
一、函数的作用域（this 指向 的问题 ）
- 箭头函数中的this
箭头函数中的 this 指向 函数定义时 的作用域对象
const shape = {
radius: 10,
diameter() {
return this.radius * 2
},
perimeter: () => 2 * Math.PI * this.radius
}
shape.diameter() // 20
shape.perimeter() // NAN
附 1 题 2题
二、构造函数和普通函数
构造函数实例化之后再添加 prototype属性，是可以访问到的。
在任何位置增加的 funxx.prototype 属性都能被该函数的实例访问到-
函数(包括构造函数) 直接追加 + prototype追加 方法的区别
- 函数本身追加的属性和方法 在实例中无法被访问
- 在函数 prototype 原型链上追加的属性和方法 无法被直接访问
知识点：new 实例化可以提升到设置 prototype 方法之前，
实例能够正常访问 后续设置的 prototype 方法如下示例代码 实例化提升
// 1， 2， 3 的代码实例
function Person (name, age) {
this.name = name;
this.age = age;
}
// 实例化 可以提升到 设置原型方法之前
let people = new Person('zhang', 23); // 在这里进行实例化
// 函数本身追加的属性和方法
Person.size = 'small';
Person.getSize = function () {
console.log('getSize');
}
// 函数原型链中追加的属性和方法
Person.prototype.height = '180';
Person.prototype.getHeight = function () {
console.log('getHeight');
}
// 访问函数的属性
console.log(Person.size); // 'small'
console.log(Person.getSize()); // 'getSize'
// 访问函数原型链上的属性
console.log(Person.height); // undefined
console.log(Person.getHeight()); // TypeError 访问出错
// 实例化 ( 知识点: 此处的实例化可被提到 原型链方法之前，原型方法可以正常被实例使用 )
// let people = new Person('zhang', 23);
// 在实例上访问函数属性 ---- 肯定没有呀
console.log(people.size); // undefined
console.log(people.getSize()); // TypeError 访问出错
// 实例中访问函数原型链中的属性
console.log(people.height); // '180'
console.log(people.getHeight()); // 'getHeight'
附出处：第 28 题
- 在原生函数的 prototype 上可任意增 删 方法
这个特性让你针对原生函数任意 增 删 改 查 系统的方法。但需要注意全局影响。
// 可以在系统函数上修改原生函数的方法
String.prototype.valueOf = () => {
return 'Just give Lydia pizza already!'
}
const name = 'Lydia'
name.giveLydiaPizza(); // 输出 ‘Just give Lydia pizza already!’
附出处 10 题 11 题 12 题
- 构造函数被当做普通函数使用时，因为无return 语句，则默认返回 undefined
一般构造函数中无 return 语句
function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
const lydia = new Person('Lydia', 'Hallie')
const sarah = Person('Sarah', 'Smith') // 将构造函数当做普通函数使用
console.log(lydia)
console.log(sarah)
附出处 12 题
三. 函数的 return 语句
- return 特别说明
函数中无return 默认返回 return undefined;
函数中return; 默认返回 return undefined;
说明：构造函数当做普通函数使用时就是典型的 无return
[1, 2, 3].map(num => {
if (typeof num === "number") return;
return num * 2;
});
// 返回 [undefined, undefined, undefined]
附: 50 题
-
构造函数中有return 需要特别注意
- return 一个对象时，new 实例化函数. 返回 return 的对象
- return 非对象时，就会忽略 return 语句， 返回 this 对象
// 代码实例
function Car() {
this.make = "Lamborghini";
this.name = 'lydia';
// return 'a test data';
return { make: "Maserati" };
}
const myCar = new Car();
console.log(myCar.make); // Maserati
console.log(myCar.name); // undefined
附: 53 题
- return + 一个可执行语句 时需要将语句执行完毕
function sayHi() {
return (() => 0)() // 这里返回 IIFE 的执行结果
}
typeof sayHi() // typeof 0 = 'number'
附: 第 12 题， 34题
四. 箭头函数一百种问题
- 箭头函数无 prototype 属性,
箭头函数更接近普通的变量
function giveLydiaPizza() {
return "Here is pizza!"
}
const giveLydiaChocolate = () => "Here's chocolate... now go hit the gym already."
console.log(giveLydiaPizza.prototype) // { consructor: ... }
console.log(giveLydiaChocolate.prototype) // undefined
注意：直接打印普通函数打印的是其 构造函数
附：第92 题， 第3 题
- 箭头函数 () {} 表达不同含义 （箭头函数的写法）
const getUser = user => { name: user.name, age: user.age }
const user = { name: "Lydia", age: 21 }
console.log(getUser(user)) // 输出 undefined
说明：getUser函数接收一个对象。对于箭头函数，如果只返回一个值，我们不必编写花括号。但是，如果您想从一个箭头函数返回一个对象，您必须在圆括号之间编写它，否则不会返回任何值!下面的函数将返回一个对象:
附：第98 题
五.函数参数到底是怎么映射的( 实参和形参 )
函数参数传递 ... 运算符收集功能在 es6 一节讲述
特殊情况
- return 语句要写分号吗(
基础篇)。良好的编码风格本质是上下行解析的问题
到底要不要写分号-重学前端
解析: 不写分号的时候 javascript 会自动做 自动分号插入
returtn, throw, break 都会做自动分号插入
function nums(a, b) {
if
(a > b)
console.log('a is big')
else
console.log('b is big')
return
a + b
}
console.log(nums(2, 4)); // b is big && undefined
console.log(nums(6, 3)); // a is big && undefined
image.png
尤雨溪曾经在知乎说：真正会导致上下行解析出问题的 token 有 5 个：括号，方括号，正则开头的斜杠，加号，减号。我还从没见过实际代码中用正则、加号、减号作为行首的情况，所以总结下来就是一句话：一行开头是括号或者方括号的时候加上分号就可以了，其他时候全部不需要（当然是在正常的写法中，而不是像上面示例的特殊写法）。
来源：javascript进阶问题列表
参考 new 命令的原理
