`
windowboy
  • 浏览: 16484 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

javascript汇总- 函数与对象

 
阅读更多
 function Person(name){   //构造函数
        this.name=name;
    }
    function fk (){};
    Person.prototype.printName=function() //原型对象
    {
        alert(this.name);
    }
    var person1=new Person('Byron');//实例化对象
1. person1.__proto__  实例化对象指向  Person.prototype 这两个是恒等的。  person1.__proto__===Person.prototype
    person1.constructor 指的就是 Person ,这两个是恒等的,就是Person的构造函数,对应构造函数 
    person1.constructor === Person
    就是要区分原型对象,在通过 Person.prototype.printName 是不在构造函数里面的。
2.如果覆盖Person.prototype 例如
   Person.prototype = function(){ return 123};
   就会出现


 

 为了保持原有的属性,可以
 Person.prototype = {name:'123',constructor:Person.constructor} 把原有的属性赋值进去。
函数汇总
 
一.函数定义
1.定义一个函数 函数对应的  funcName 对应的是 funcname()对象。
     function Foo(){
           //函数体
     }
 2.定义一个匿名函数,并且赋值给 b 变量,而 b对应的 
     var b=function(x){
            //函数体
      }  
3.采用函数构造方式建立一个函数
funcName = new Function("x",'return 2*x');
 
其中
 

 Foo.prototype 是一个Food的引用对象
   
Foo.prototype.constructor指向的是 Foo()  的构造函数。
Foo.constructor 指向的是Function(){}函数 
对应第二种方式创建的对象

 b.prototype是一个Object对象的引用
       

  b.prototype.constructor 指向的是匿名的构造函数
 
函数的私有属性
在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数。
functionPerson(){
        var name= "tony";//私有变量var fn = function(){} 
//私有函数
 }
这里的私有是针对实例对象而言的
var obj = new Person();
    alert(obj.name);//弹出 undefined
    alert(obj.fn);//
弹出 undefined

但是如果 把属性放置在构造函数里面效果就不一样了
function person(){
  this.name = '123';
this.fn=function(){}
}
那么实例化的每个对象都可以访问。
函数静态变量
 function Person(){};
    Person.name = 'tony';//静态变量
    Person.fn = function(){}  //静态函数
    alert(Person.name);//'tony'
    alert(typeof Person.fn)//function
    var t = new Person();
    alert(t.name);//undefined
    alert(typeof t.fn);//undefined


 
function Person(name,age){
         this.name = name;
         this.age = age;
     }
    var p1 = new Person("nn",19);
    var p2 = new Person("mm",20);
 实例化p1,p2两个对象,中的属性和方法与p2中的属性与方法虽然同名但却不是一个引用,而是对Person对象定义的属性和方法的一个复制。
如果定义太多的实例对象,那么就会产生很多重复的工作。
为了解决这个问题,引用了prototype(原型)这个概念
prototype 原型
每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。prototype就是通过调用构造函数而创建的那个对象实例的原型对象。
 

 
再看如下代码
var Person= function(){};
    Person.prototype.say= function(){
        alert("I'm a person");
    }
    var tom= newPerson();
tom.say();
对于方法 Person可以通过 prototype获取方法say,但是对实例化对象tom是怎么访问到say呢
由于tom中没有这个方法,所以,他就会去他的__proto__中去找,也就是Person.prototype,所以最终执行了该run()方法
当调用构造函数创建一个实例的时候,实例内部将包含一个内部指针(__proto__)指向构造函数(Person)的prototype
现在做一下区分:

1.实例就是通过构造函数创建的。实例一创造出来就具有constructor属性(指向构造函数)和__proto__属性(指向原型对象),

2.构造函数中有一个prototype属性,这个属性是一个指针,指向它的原型对象。

3.原型对象内部也有一个指针(constructor属性)指向构造函数:Person.prototype.constructor = Person;

通过一个例子说明



 

可以从程序运行结果看出,构造函数prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的。
 

函数对象实例

 定义一个对象
   function Person = function(name){ this.name = name;}


 
var tom = new Person();


 

new操作符具体干了什么呢?其实很简单,就干了三件事情。

var tom= {};
tom.__proto__ = Person.prototype;  
Person.call(obj); 
看看多重继承的概念


 
TwoShape.prototype = new Shape();产生了 TowShape.prototype._proto_指向了Shape.prototype 
对应p对象,由于实例化TowShape(),把Shape的属性也复制过来了。
对应p2,由于实例化Triangle(),Triangle指向TowShape,而TowShape指向Shape,这样先复制Shape的属性,然后复制TowShape 属性。
如果想保持原有构造数据
    TwoShape.prototype.constructor = TwoShape;
    Triangle.prototype.constructor = Triangle;

原型继承

原型链的问题:原型链虽然很强大,可以用它来实现继承,但它也存在一些问题。其中最主要的问题来自包含引用类型的值原型(int等基本值类型)。
包含引用类型的原型属性会被所有实例共享;而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。
在通过原型来实现继承时,原型实际上回变成另一个类型的实例(
TwoShape.prototype = new Shape()
)。于是,原先的实例属性也就变成了原型的属性


 
__ptoto__属性

__ptoto__属性(IE浏览器不支持)是实例指向原型对象的一个指针,它的作用就是指向构造函数的原型属性constructor,通过这两个属性,就可以访问原型里的属性和方法了。

Javascript中的对象实例本质上是由一系列的属性组成的,在这些属性中,有一个内部的不可见的特殊属性——__proto__,该属性的值指向该对象实例的原型,一个对象实例只拥有一个唯一的原型。

<scripttype="text/javascript">function Person(){        //大写,代表构造函数
        Person.prototype.name = "aaaa";//原型属性
        Person.prototype.age = "21";
        Person.prototype.run = function()//原型方法
        {  
            returnthis.name + this.age + 'studying';
        }
    }

    var p1= new Person();
    var p2 = new Person();
    alert(p1.constructor);//构造属性,可以获取构造函数本身,//作用是被原型指针定位,然后得到构造函数本身</script>

__proto__属性和prototype属性的区别

prototypefunction对象中专有的属性。
__proto__是普通对象的隐式属性,在new的时候,会指向prototype所指的对象;
__ptoto__实际上是某个实体对象的属性,而prototype则是属于构造函数的属性。__ptoto__只能在学习或调试的环境下使用。

原型模式的执行流程

1.先查找构造函数实例里的属性或方法,如果有,就立即返回。
2.如果构造函数的实例没有,就去它的原型对象里找,如果有,就立即返回

原型对象的

<scripttype="text/javascript">
   function Box(){        //大写,代表构造函数
        Box.prototype.name = "aaaa";//原型属性
        Box.prototype.age = "21";
        Box.prototype.run = function()//原型方法
        {  
            returnthis.name + this.age + 'studying';
        }
    }

    var box1 = new Box()
var box1 = new Box();
    alert(box1.name);//aaaa,原型里的值
    box1.name = "bbbb";
    alert(box1.name);//bbbb,就近原则var box2 = new Box();
    alert(box2.name);//aaaa,原型的值,没有被box1修改</script>
构造函数.prototype = 原型对象
原型对象.constructor = 构造函数(模板)
原型对象.isPrototypeof(实例对象)   判断实例对象的原型 是不是当前对象
javascript语言里任何匿名函数都是属于window对象,它们也都是在全局作用域构造时候完成定义和赋值
<script type="text/javascript"> function ftn03(){
        var ftn04 = function(){
            console.log(this);// window         };
        ftn04();
    }
    ftn03();
</script>
构造函数方式
    function person(name,age){
    //在执行第一行代码前,JS引擎会生成一个对象
      this.name = name:
      this.age = age;
      this.getInfo = function(){
        alert(this.name);
      }
      //此处有一个隐藏的return语句,用于将之前生成的对象返回
    }
   
    var p = new person('a',11)
 
  • 大小: 3.6 KB
  • 大小: 3.2 KB
  • 大小: 1.6 KB
  • 大小: 2.1 KB
  • 大小: 2.2 KB
  • 大小: 2.3 KB
  • 大小: 2.3 KB
  • 大小: 2.6 KB
  • 大小: 23.6 KB
  • 大小: 12.2 KB
  • 大小: 4.2 KB
  • 大小: 3.9 KB
  • 大小: 25.3 KB
  • 大小: 17.6 KB
分享到:
评论

相关推荐

    JavaScript常用工具函数库汇总.docx

    "JavaScript常用工具函数库汇总" 从给定的文件中,我们可以总结出以下几个重要的知识点: 1. 深拷贝(Deep Clone) 在 JavaScript 中,深拷贝是将一个对象或数组完全复制到另一个对象或数组中,而不仅仅是复制...

    JavaScript实用小函数(四)

    "js-validator"这个文件名可能与验证相关的JavaScript函数或库有关,例如表单验证或者数据校验,这也可能是博文中探讨的一个主题。在Web应用中,数据验证是必不可少的一环,确保用户输入的数据符合预设规则,防止...

    JavaScript函数汇总

    在这个“JavaScript函数汇总”中,我们将深入探讨函数的各种概念、类型以及使用方法。 1. 函数定义 在JavaScript中,函数可以使用`function`关键字定义。例如: ```javascript function greet(name) { console.log...

    Javascript知识点汇总.doc

    JavaScript知识点汇总 JavaScript是一种广泛使用的轻量级编程语言,主要用于客户端网页交互,为HTML和Web应用添加动态功能。本文将全面概述JavaScript的核心概念、语法结构以及常见应用。 1. JavaScript定义 ...

    100多个很有用的JavaScript函数以及基础写法汇总

    本文将详细介绍从给定文件中提炼出的一些JavaScript基础知识和常见函数。 1. `document.write("")` 是一个输出语句,常用于向HTML文档中动态插入内容。 2. 注释在JavaScript中可以使用 `//` 开始一行注释,或者 `/*...

    javascript 中英文资料 汇总

    它可能包含了JavaScript的基础语法、函数、对象、事件处理等核心概念,是初学者入门的良好教材。 "推荐JavaScript 2005- Wrox - Professional Javascript For Web Developers.pdf"是一本专业级的JavaScript书籍,...

    一些手写JavaScript常用的函数汇总

    ### JavaScript常用函数汇总 #### 一、bind、call、apply函数的实现 在JavaScript中,函数的`this`上下文是非常重要的概念。`bind`、`call`和`apply`是改变函数执行上下文中的`this`指向的方法,它们位于`Function...

    javascript函数大全

    - **函数描述**:对数组中的每个元素执行一个由左至右的累加器函数,将其结果汇总为单个返回值。 - **示例**: ```javascript var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(acc, cur) { return acc...

    JavaScript 小游戏代码汇总

    JavaScript 小游戏代码汇总 JavaScript 是一种广泛使用的脚本语言,常用于开发 web ...JavaScript 小游戏代码汇总展示了 JavaScript 语言在游戏开发中的应用,包括游戏逻辑、游戏对象、游戏事件和游戏状态等方面。

    JS面向对象汇总PDF

    **JS面向对象汇总PDF**是针对JavaScript编程语言中面向对象编程概念的一个综合性的学习资料,主要探讨了JavaScript如何实现面向对象编程(OOP)的设计原则和模式。在JavaScript中,面向对象编程是一种重要的编程范式...

    即用即查JAVASCRIPT核心对象参考手册

    **概述**:Function 对象用于表示 JavaScript 中的函数。 - **属性**: - `name`:获取或设置函数名。 - `length`:获取函数期望的参数数量。 - `prototype`:函数的原型对象。 - **方法**: - `apply()`:调用...

    javascript对象与数组参考大全

    根据提供的文件信息,我们可以从标题、描述以及部分内容中提取出关于JavaScript对象与数组的重要知识点。 ### JavaScript对象与数组参考大全 #### 一、JavaScript对象详解 **1. Anchor对象** - **简介**: `...

    JavaScript面试题汇总,内含答案

    - 全局函数与`window`对象方法的区别。 - 过时或被替代的函数及其替代方案。 以上是对题目中知识点的详细解释,这些知识点涵盖了JavaScript的基础概念、语言特性以及一些高级用法,对于面试准备来说是非常重要的...

    JavaScript基础函数整理汇总

    JavaScript中创建函数对象存在多种方式,包括直接使用函数构造函数和使用new关键字。 在文件中,通过两种不同的方式创建了Ball函数对象,展示了一个对象实例的创建和如何给对象添加属性。 8. 添加共享属性 ...

    常用的JS验证和函数汇总

    标题“常用的JS验证和函数汇总”表明了本文将要分享的是在JavaScript(JS)编程中常用的验证和函数集。这些验证和函数是作者在日常工作或项目中积累下来的,具有实用价值,并且能够被广泛应用。从描述中可以看出,...

    javascript的经典面试题汇总

    根据给定的信息,我们将深入分析并提取出与JavaScript面试题相关的知识点。 ### 一、单选题 #### 1. 以下哪条语句会产生运行错误: - **选项A**: `var obj = ();` - **解析**:在JavaScript中,括号`()`通常用于...

    javascript常用代码及汇总

    首先,JavaScript的核心概念包括变量、数据类型、控制结构、函数、数组、对象等。变量是存储数据的地方,JavaScript支持动态数据类型,即变量在声明时无需指定类型。控制结构如条件语句(if...else)和循环(for,...

    源文件程序天下JAVASCRIPT实例自学手册

    4.1 面向对象编程与基于对象编程 4.1.1 什么是对象 4.1.2 面向对象编程 4.1.3 面向对象编程:继承 4.1.4 面向对象编程:封装 4.1.5 面向对象编程:多态 4.1.6 基于对象编程 4.2 JavaScript对象的生成 4.2.1 HTML文档...

Global site tag (gtag.js) - Google Analytics