js基础③—注释、快捷键、命名规则、打印、面向对象?

简介: head标签中添加<script type="text/javascript"></script>

一、如何使用js?


head标签中添加<script type="text/javascript"></script>


二、第一个js程序


<html>
  <head>
    <title></title>
    <style type="text/css">     
    </style>
    <script type="text/javascript">
      //alert("Hello World");      //相当于C#的Messagebox.show
      console.log("Hello World");  //前台不显示,打印在后台
    </script>
  </head>
  <body>
  </body>
</html>


三、注释


// 行注释


/*  */ 块注释


四、快捷键


notepad++快捷键


Ctrl+K:多行注释


Ctrl+q:取消多行注释


Ctrl+shift+K:


五、命名规则


C# :帕斯卡,GetMax(int num1,int num2)


js:骆驼命名规则,getMax(num1,num2)


六、特点


  • 大小写敏感
  • js不编译,直接解释执行


七、打印


Alert("Hello World");  (弹出警告框。相当于C#的Messagebox.Show,缺点:会阻塞程序)


console.log("Hello World");   写入到浏览器的控制台


??  alert和console有什么区别?


相当于C#的Messagebox.Show


前台不显示,打印在后台


??  既然有了alert为什么还有console?


每执行一次alert就会阻塞程序,console不需要阻塞程序就直接在后台打印内容


思维导图


5580263cd3054e6d84989dfeee3d0931.jpg


C#:从类继承


js:从对象继承


什么叫继承?


模板(类)


原型继承(实体)


有一个对象存在,构造函数设置原型为这个对象


创建出来的对象就继承与这个对象(从对象那里继承)


<script type="text/javascript">       
        onload = function () {
           var Person= function(){
        this.say = function(){
                alert("你好");
        };
           };
           var p1= new Person();
           var p2 = new Person();
           p1.say();
        };
</script>


此时p1、p2用的不是同一个say方法


2fbb226cf96ba876af50fc9883f56ca8.png


方法与变量name、age等字段一样,占据了对象的内存


也就是说,每创建一个这样的函数,就会浪费一段这样的内存空间


什么是原型继承?


原型就是函数的prototype属性


 //使用继承后
   var Person = function(){
   };
   Person.prototype ={say:function(){
        alert("牛号");
   }};
   var p1 = new Person();
   var p2 = new Person();
   alert(p1.say===p2.say);   //打印true


js可以实现多继承


    <script type="text/javascript">       
        onload = function () {
           var inherite= function(name){
        this.name= name;
           };
           var o = {
                sayHello:function(){
                        alert("你好,我是"+ (this.name || "不存在"));
                }
           };
           o.sayHello();   //此时打印”你好,我是不存在“
           inherite.call(o,"赵晓虎");
           o.sayHello();  //此时打印”你好,我是赵晓虎“
        };
    </script>


原型链


6601c8832ed52520bdd478b6e998ca0c.png


如果需要原型,那么就一定要有函数


每一个对象有一个属性叫:_proto_


对象有原型,那么原型也是对象,原型也有原型


所有的函数是对象,继承自Function.prototype


Function.prototype是对象,继承自Object.prototype


Object.prototype是对象,继承自null


obj是对象,继承自Object.prototype


Function是对象,继承自Function.prototype


Function是函数,继承自Function.prototype


js成员的访问规则


O.方法( )


首先在o当前这个类型中寻找该成员的定义,如果存在该成员的定义,那么就直接使用该成员


如果该成员不在当前类型中,就访问其原型(原型链中的上一级)


以此类推,直到null位置


什么是js框架库?


使用js代码封装为一些文件,使用时只要引用进来即可


常见的js库


Prototype、YUI、Dojo、ExtJS、Jquery等

相关文章
|
6月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
53 0
|
6月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
59 0
|
4月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
201 0
|
2月前
|
JSON JavaScript 前端开发
如何使用代码注释:关于JavaScript与TypeScript
TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
46 5
|
5月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
133 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
5月前
|
JavaScript 前端开发
JavaScript 注释
JavaScript 注释
36 11
|
4月前
|
网络架构
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
|
5月前
|
JavaScript 前端开发
JavaScript变量命名规则及关键字详解
JavaScript变量命名规则及关键字详解
|
5月前
|
算法 JavaScript 前端开发
【经典算法】LCR187:破冰游戏(约瑟夫问题,Java/C/Python3/JavaScript实现含注释说明,Easy)
【经典算法】LCR187:破冰游戏(约瑟夫问题,Java/C/Python3/JavaScript实现含注释说明,Easy)
81 1
|
5月前
|
存储 JavaScript 前端开发
【经典算法】LeetCode350:两个数组的交集 II(Java/C/Python3/JavaScript实现含注释说明,Easy)
【经典算法】LeetCode350:两个数组的交集 II(Java/C/Python3/JavaScript实现含注释说明,Easy)
29 1