资讯专栏INFORMATION COLUMN

《精通JavaScript》读书笔记

ityouknow / 3311人阅读

摘要:使用构造函数属性来判断对象的类型检查数字实际上是否为字符串如果是,则把字符串解析为整数检查字符串实际上是否为数组如果是,则根据数组用逗号归并出字符串来变量的类型检查变量变量变量构造函数用闭包实现的函数化数字求和函数的函数生成器返回一个简单的

1.使用构造函数属性来判断对象的类型

</>复制代码

  1. //检查数字实际上是否为字符串
  2. if (num.constructor == String) {
  3. //如果是,则把字符串解析为整数
  4. num = parseInt(num);
  5. }
  6. //检查字符串实际上是否为数组
  7. if (str.constructor == Array) {
  8. //如果是,则根据数组用逗号归并出字符串来
  9. str = str.join(",");
  10. }
2.变量的类型检查
变量 typeof变量 变量.构造函数
{an:"object"} object Object
["an","array"] object Array
function(){} function Function
"a string" string String
55 number Number
true boolean Boolean
new User() object User
3. 用闭包实现的函数Curry化

</>复制代码

  1. //数字求和函数的函数生成器
  2. function addGenerator(num) {
  3. //返回一个简单的函数,求两个数字的和,其中第一个数字来自生成器
  4. return function (toAdd) {
  5. return num + toAdd
  6. }
  7. }
  8. //addFive现在包含一个接受单一参数的函数,这个函数能求得5加上该参数的和
  9. var addFive = addGenerator(5);
  10. console.log(addFive(4));//输出9
4.使用匿名函数来隐藏全局作用域变量

</>复制代码

  1. (function(){
  2. //变量原本应该是全局的
  3. var msg = "test";
  4. //将一个新函数绑定到全局对象
  5. window.onunload = function(){
  6. //这个函数使用了隐藏的msg
  7. alert(msg);
  8. };
  9. //关闭匿名函数并执行
  10. })();
5.使用匿名函数来激发出创建多个使用闭包的函数所需的作用域

</>复制代码

  1. //一个ID为main的元素
  2. var obj = document.getElementById("main");
  3. //用于绑定一个数组
  4. var items = ["click", "keypress"];
  5. //遍历数组的每个成员
  6. for (var i = 0; i < items.length; i++) {
  7. //使用一个自执行的匿名函数来激发出作用域
  8. (function () {
  9. //记住在这个作用域内的值
  10. var item = items[i];
  11. obj["on" + item] = function () {
  12. /item引用本for循环上下文所属作用域中的一个父变量
  13. alert("alert" + item);
  14. }
  15. })();
  16. }
6.在上下文对象内使用函数并将其上下文对象切换为另一个变量

</>复制代码

  1. var obj = {
  2. yes: function () {
  3. //this==obj
  4. this.val = true;
  5. },
  6. no: function () {
  7. this.val = false;
  8. }
  9. };
  10. //我们发现"obj"对象没有val属性
  11. alert(obj.val == null);
  12. //执行yes函数后,将val属性与"obj"对象关联起来
  13. obj.yes();
  14. alert(obj.val == true);
  15. //不过现在把window.no指向obj.no并执行之
  16. window.no = obj.no;
  17. window.no();
  18. //结果是obj对象的val不变(因为no的上下文已经变为window对象了)
  19. alert(obj.val == true);
  20. //window的val属性被更新了
  21. alert(window.val == false);

把obj.no变量的上下文对象切换为window变量时,代码变得不好理解了。幸运的是,JavaScript提供了一套方法来让这一过程变得更好理解和实现。即call和apply两个方法。

7.修改函数上下文对象的例子

</>复制代码

  1. //一个设置上下文对象颜色样式的简单函数
  2. function changeColor(color) {
  3. this.style.color = color;
  4. }
  5. //window对象中调用此函数会失败,因为window对象没有style属性
  6. changeColor("white");
  7. //找出ID为main的文档
  8. var main = document.getElementById("main");
  9. //使用call方法将它的颜色置为黑色
  10. changeColor.call(main, "black");
  11. //设置body元素颜色的函数
  12. function setBodyColor() {
  13. //apply方法将上下文对象设置为第一个参数指定的body元素,第二个参数是传给函数的所有参数的数组
  14. changeColor.apply(document.body, arguments);
  15. }
  16. //将body的背景色置为黑色
  17. setBodyColor("black");
8.使用constructor属性的例子

</>复制代码

  1. //创建一个新的简单的User对象
  2. function User() {
  3. }
  4. //创建一个User对象
  5. var me = new User();
  6. //还是创建一个新的User对象(用前一个对象的constructor引用来创建)
  7. var you = new me.constructor();
  8. //你可以发现这两个对象的constructor实质上是一致的
  9. alert(me.constructor == you.constructor);
9.对象的方法通过prototype对象添加的例子

</>复制代码

  1. //创建一个新的User构造函数
  2. function User(name, age) {
  3. this.name = name;
  4. this.age = age;
  5. }
  6. //将一个新的函数添加到此对象的prototype对象中
  7. User.prototype.getName = function () {
  8. return this.name;
  9. };
  10. //并再给此prototype对象添加一个函数,注意其上下文是实例化后的对象
  11. User.prototype.getAge = function () {
  12. return this.age;
  13. };
  14. //实例化一个新的User对象
  15. var user = new User("Bob", 44);
  16. //可以看到我们添加的这两个属性都在刚才创建的对象中,并且有合适的上下文
  17. alert(user.getName == "Bob");
  18. alert(user.getAge == 44);
10.私有方法

</>复制代码

  1. 私有方法和私有变量只允许其他的私有方法、私有变量和特权方法访问。这种方法可以定义一些只让对象内部访问,而外部访问不到的代码。

</>复制代码

  1. //表示教室的一个对象构造函数
  2. function Classroom(students, teacher) {
  3. //用于显示所有班上学生的私有方法
  4. function disp() {
  5. alert(this.names.join(","));
  6. }
  7. //将班级数据存入公共对象属性中
  8. this.students = students;
  9. this.teacher = teacher;
  10. //调用私有方法来显示错误
  11. disp();
  12. }
  13. //创建一个新的classroom对象
  14. var c = new Classroom(["John", "Bob"], "Mr. Smith");
  15. //调用disp方法会失败,因为它不是该对象的公共属性
  16. c.disp();
11.特权方法

</>复制代码

  1. 特权方法用来指代哪些在查看并处理私有变量的同时允许用户以公共方法的方式访问的方法。

</>复制代码

  1. //创建一个新的User对象构造函数
  2. function User(name, age) {
  3. //尝试算出用户出生的年份
  4. var year = (new Date()).getFullYear() - age;
  5. //创建一个新的特权方法,能够访问year变量,同时自身属于公共可访问的
  6. this.getYearBorn = function () {
  7. return year;
  8. }
  9. }
  10. //创建User对象的一个新示例
  11. var user = new User("Bob", 44);
  12. //验证返回的年份正确
  13. alert(user.getYearBorn() == 1962);
  14. //注意我们无法访问该对象私有的年份属性
  15. alert(user.year == null);
12.静态方法

</>复制代码

  1. 静态方法的实质与任何其他一般函数没有什么不同,最主要的区别在于,其他函数是以对象的静态属性形式存在的。作为一个属性,它们不能在该对象的实例的上下文中访问,而只属于主对象本身的那个上下文中。

</>复制代码

  1. //添加到一个User对象的静态方法
  2. User.clnoeUser = function (user) {
  3. //创建并返回一个新的用户
  4. return new User(user.getName(), user.getAge());
  5. };
13.原型式继承的例子

</>复制代码

  1. //为Person对象创建一个构造函数
  2. function Person(name) {
  3. this.name = name;
  4. }
  5. //给Person对象添加一个新方法
  6. Person.prototype.getName = function () {
  7. return this.name;
  8. };
  9. //创建一个新的User对象的构造函数
  10. function User(name, password) {
  11. //注意,这里并没有支持方法的重载/集成,也就是说,不能调用父类的构造函数
  12. this.name = name;
  13. this.password = password;
  14. }
  15. //User对象继承所有Person对象的方法
  16. User.prototype = new Person();
  17. //我们添加一个新方法到User对象中
  18. User.prototype.getPassword = function () {
  19. return this.password;
  20. };
14.JavaScript中的命名空间化及其实现

</>复制代码

  1. //创建一个默认的、全局的命名空间
  2. var YAHOO = {};
  3. //使用对象设置一些子命名空间
  4. YAHOO.util = {};
  5. //创建最终命名空间,它包含一个值为函数的属性
  6. YAHOO.util.Event = {
  7. addEventListener: function () {
  8. }
  9. };
  10. //调用某个具体命名空间中的函数
  11. YAHOO.util.Event.addEventListener();

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79983.html

相关文章

  • 精通正则表达式- 读书笔记

    摘要:行的起始与结束以开头的以结束的匹配若干字符之一匹配含有的单词排除型字符组匹配除了到的任何数字用点号匹配任意字符加号表示之前紧邻的的元素出现一次或者多次星号表示之前紧邻的的元素出现任意多次,或者不出现问号表示可选项或任何空白字符例如 行的起始与结束 var reg = /^cat/; // 以cat 开头的 var reg = /cat$/; // 以cat 结束的 匹配若干...

    kumfo 评论0 收藏0
  • Frontend Engineer Booklist 前端书单

    摘要:初级书单深入理解人评价作者徐涛出版社机械工业出版社出版年年月日赞回复添加到豆列来自豆瓣读书响应式设计人评价作者出版社人民邮电出版社出版年年月日赞回复添加到豆列来自豆瓣读书深入浅出中文版人评价作者马劳克林出版社东南大学出版社出版年年月 初级书单 深入理解Bootstrap 7.0 (65人评价)作者: 徐涛 出版社: 机械工业出版社 出版年: 2014-52015年1月19日 赞 回复添...

    Lowky 评论0 收藏0
  • Frontend Engineer Booklist 前端书单

    摘要:初级书单深入理解人评价作者徐涛出版社机械工业出版社出版年年月日赞回复添加到豆列来自豆瓣读书响应式设计人评价作者出版社人民邮电出版社出版年年月日赞回复添加到豆列来自豆瓣读书深入浅出中文版人评价作者马劳克林出版社东南大学出版社出版年年月 初级书单 深入理解Bootstrap 7.0 (65人评价)作者: 徐涛 出版社: 机械工业出版社 出版年: 2014-52015年1月19日 赞 回复添...

    ConardLi 评论0 收藏0
  • Frontend Engineer Booklist 前端书单

    摘要:初级书单深入理解人评价作者徐涛出版社机械工业出版社出版年年月日赞回复添加到豆列来自豆瓣读书响应式设计人评价作者出版社人民邮电出版社出版年年月日赞回复添加到豆列来自豆瓣读书深入浅出中文版人评价作者马劳克林出版社东南大学出版社出版年年月 初级书单 深入理解Bootstrap 7.0 (65人评价)作者: 徐涛 出版社: 机械工业出版社 出版年: 2014-52015年1月19日 赞 回复添...

    pekonchan 评论0 收藏0
  • 读书笔记:编写高质量javascript的68个方法

    摘要:第条尽量少使用全局对象避免声明全局变量尽量声明局部变量避免对全局变量增加属性第条始终声明局部变量第条避免使用语句第条熟练使用闭包的函数值包含了比调用他们时执行所需要的代码还要更多的信息。那些在其所涵盖的作用域内跟踪变量的函数称为闭包。 书还没看完。一遍看,一遍写读书笔记。 这本书的序是JavaScript之父Brendan Eich写的,作者是JavaScript标准化委员会专家。可想...

    Vicky 评论0 收藏0

发表评论

0条评论

ityouknow

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<