JS-面向对象-函数的使用场景---作为其他变量的值 / 作为对象的属性值 / 作为其他函数的参数 / 作为其他函数的返回值 / 作为构造函数-函數-匯編語言學習筆記

JS-面向对象-函数的使用场景---作为其他变量的值 / 作为对象的属性值 / 作为其他函数的参数 / 作为其他函数的返回值 / 作为构造函数

2023-09-09 阅读 13 评论 0

摘要：作为其他变量的值 <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv

作为其他变量的值


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>function foo(x, y) {if (x > y) {return x;} else {return y;}}// 将 foo 函数作为变量 bar 的值var bar = foo;console.log(foo(12, 88))console.log(bar(12, 66))</script>
</body></html>

作为对象的属性值


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>// 当函数作为对象的属性值存在时，我们通常把它称为对象的方法。例如，obj 对象的 sayName() 方法。var obj = {name: '张康',sayName: function () {return this.name;}};</script>
</body></html>

作为其他函数的参数


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>// 我们之前遇到的将函数作为其他函数的参数的用法// ele.addEventListener('click', function(){})// $.getJSON('url', function(data, status, xhr) {})// 定义函数 foofunction foo(max) {console.log(max)}// 定义函数 barfunction bar(a, b, callback) {var max = -1;if (a > b) {max = a;} else {max = b;}// 在 bar 函数中调用传入的函数callback(max)}// 将 foo 函数作为 bar 函数的实参bar(12, 99, foo)// 上面的代码可以被简写成如下形式：// function bar(a, b, callback) {//     if (a > b) {//         callback(a)//     } else {//         callback(b)//     }// }// bar(12, 99, function (max) {//     console.log(max)// })</script>
</body></html>

作为其他函数的返回值


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li><li>列表项5</li><li>列表项6</li></ul><script>// 基本示例：// 定义函数 bar/* function bar() {var i = 0;// 定义函数 foofunction foo() {console.log(i)i++;}// 将函数 foo 返回到函数外部return foo;}// 闭包函数是连接函数内部和外部的桥梁。面向函数编程是什么？var fun = bar()fun();fun();fun(); */// 将函数作为其他函数返回值的使用场景：var listItems = document.getElementsByTagName('li');// 通过为 dom 对象添加自定义属性 idx 来记录索引值// for(var i = 0, len = listItems.length; i < len; i++) {//     listItems[i].idx = i;//     listItems[i].onclick = function() {//         console.log(this.idx)//     };// }// 通过闭包函数记录索引值for(var i = 0, len = listItems.length; i < len; i++) {listItems[i].onclick = (function(idx) {return function() {console.log(idx)};})(i)}</script>
</body></html>

作为构造函数（定义对象）


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>// 本地对象 Array/Function/Date...// 普通函数，偏重于实现功能（业务逻辑）function max (x, y) {return x > y ? x : y;}// 调用普通函数max(23, 45)// 构造函数，用来创建自定义对象的实例function Dog(dogName, dogAge) {this.name = dogName;this.age = dogAge;}// 调用构造函数var dog1 = new Dog('哈士奇', 3);var dog2 = new Dog('泰迪', 2);console.log(dog1, dog2)// 1. 当我们使用 new 操作符调用一个函数时，函数内部会自动创建一个该对象的实例。// 2. 我们可以在函数内部使用 this 关键字访问新创建的实例。// 3. 函数调用结束时，新创建的对象实例会被自动地返回到函数外部。面向对象的方法和函数的区别，// 4. 我们也可以在构造函数中手动地返回一个值，如果返回的是原始类型的数据，则会被忽略，如果返回的是引用类型的数据，则该数据会取代原本要返回的新实例。// 构造函数与普通函数本质上没什么区别，只不过为了区分它们，我们习惯将构造函数的首字母大写。// 1. 构造函数的首字母需要大写。面向函数和面向对象、// 2. 在构造函数时需要使用 new 操作符。</script>
</body></html>

原文链接：https://hbdhgg.com/3/31251.html

发表评论: